問題上視

我已經經歷了很多的資源去網上視（在apple.com，quirksmode.org），但我仍然感到困惑小幅....問題上視

說我有具有寬度的頁面現在我想優化相同的iPad查看..

如果我設置元視口作爲設備寬度（我認爲將意味着任何方向的iPad 768px）;

這是否意味着我的字體大小將擴大爲768px？或
我的頁面會縮小，如果它是一個768像素的寬度，而不是400px？

我不太清楚如果我們在不同的場景中使用視口會產生什麼效果？

有沒有使用任何網頁上視的任何負面影響（如果頁面寬度<或>設定視口寬度）

可能有人請幫助我在一個易於理解的方式..

謝謝。

來源

2011-04-22 testndtv

iPad屏幕與普通的臺式機和筆記本電腦屏幕尺寸和分辨率非常相似，它們不需要特殊的優化。 – reisio 2011-04-22 06:22:57

請仔細閱讀我的問題..我的問題是關於視口.. – testndtv 2011-04-22 12:33:33

視口僅僅意味着「頁面呈現的屏幕位」（與顯示另一個窗口的位或瀏覽器工具欄相反）。 – Quentin 2011-04-22 16:46:00

我衷心建議你閱讀這篇文章：http://www.quirksmode.org/mobile/viewports2.html 它可以回答一些或所有問題關於視口。這當然幫助了我。

關鍵在於瞭解視覺視口（瀏覽器的像素寬度）和佈局視口（CSS想要以像素爲單位呈現網站的寬度）之間的差異。顯然，在大多數情況下，佈局視口將比視覺視口大得多。

E.g.您的網站可能寬度爲950px，但瀏覽器的可視視口可能只有320px。通常移動瀏覽器會放大顯示整個頁面，但是誰可以閱讀？

因此，在標記中設置<meta name="viewport" content="width=320" ... >會將佈局視口設置爲320px - 與視覺視口相同！

來源

2011-08-27 18:15:32 MarkW

Perfect..u似乎擊中了正確的地方..我已經閱讀了你給出的鏈接，雖然這是一個很好的例子，但我需要使這個概念100％清晰。 – testndtv 2011-08-28 07:35:20

只需添加，兩個視口都是蘋果對蘋果的比較？就像他們都在相同的「像素」值？ – testndtv 2011-08-28 07:36:29

我還會有一些後續問題。找到這個主題有趣... – testndtv 2011-08-28 07:39:56

根據我的理解（我對所有媒體查詢和使用視口一起感到困惑），如果將視口設置爲480px並且iPad比較大，那麼它看起來就像它在桌面上的樣子電腦。它會忽略這個，因爲它不是ipad的那麼小的視口。

除非您爲iPad調用特定的文件（ipad.css），併爲該寬度和該寬度之間的設備添加單獨的媒體查詢。例如。

<link type="text/css" rel="stylesheet" 
media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" 
href="ipad.css" />

或使用媒體查詢

@media screen and (orientation:portrait) {} 
@media screen and (orientation:landscape) {}

您還可以重置你的CSS的設備，所以它知道來調整字體，類標記名回到它們應該如何爲移動設備。

希望有所幫助。

這裏有一些資源，我一直在玩：

來源

2011-05-04 01:21:15

好的，爲了消除媒體查詢中的混淆，您需要了解使用媒體查詢的概念。

@media (min-width: 768px) and (max-width: 980px) { /*css here*/}

它檢查瀏覽器的視口，並處內CSS代碼到瀏覽器。您將在視圖端口範圍內的不同媒體查詢中設置不同的CSS。代碼將在css文件中爲：

@media (min-width: 320px) and (max-width: 480px) { /*css here*/} 
    @media (min-width: 481px) and (max-width: 768px) { /*css here*/} 
    @media (min-width: 769px) and (max-width: 980px) { /*css here*/} 
    @media (min-width: 981px) and (max-width: 1024px) { /*css here*/} 
    @media (min-width: 1025px) and (max-width: 1240px) { /*css here*/}

還有另一種方法。根據媒體查詢添加不同的css文件，如下所示：

<link type="text/css" rel="stylesheet" media="(min-width: 320px) and (max-width: 480px)" href="ipad.css" /> 
    ... 
    ...

因此，根據這些查詢，您可以爲相同的輸出設置不同的樣式。現在，如果您想強制實際不在瀏覽器中的不同視圖端口大小，則必須設置元標記。

<meta name="viewport" content="width=320, ... ">

這意味着，瀏覽器設置它的視口，並且將縮小或根據實際瀏覽器視圖端口大小需要擴大。它只適用於「Opera Mobile 11」以後的版本。因此，如果您的瀏覽器的視圖端口爲360，元設置爲320，則它將被放大或放大1.125倍。

來源

2012-03-09 07:04:21

回答

相關問題