自適應網頁設計和高分辨率顯示器（iPhone 4/5）

我最近開始具備自適應網頁設計玩弄周圍和在這裏做一個基本的測試：自適應網頁設計和高分辨率顯示器（iPhone 4/5）

http://test.studev.net/

它工作正常，在桌面瀏覽器但是我對如何處理最小寬度設計時加載高分辨率設備（例如iPhone上的視網膜顯示器）時有點困惑。由於這種類型的顯示器，它意味着例如在桌面上正常讀取的大小16px是不可能在iPhone 4/5上讀取的。

這是怎麼處理的？

2013-04-17 stu177

你有沒有考慮正要離開基本字體大小單獨使用相對單位（如'em'），用於調節較大的字體大小/更小的元素？ – cimmanon

你能否解釋一下如何做到這一點？ – stu177

它的精神在於你將你的「普通」文本保留爲默認字體大小。當你需要更大或更小時，可以用一個百分比來修改它：http://codepen.io/cimmanon/pen/GjDwe。也有用的閱讀：http://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-pt-vs/和http://blog.cloudfour.com/the-ems-have -it-proportional-media-queries-ftw/ – cimmanon

那麼無論是如果你想在移動或更大的文字較小，你會做

@media screen and (max-width: 480px) { 
    font-size: 10px; /* Smaller */ 
}

或

@media screen and (max-width: 480px) { 
    font-size: 20px; /*Larger*/ 
}

並確保你有這樣的您<HEAD>標籤：

<meta name="viewport" content="width=device-width, initial-scale=1">

或者你也可以禁用變焦像這樣：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

而對於IE10支持，嘗試：

@-ms-viewport{ 
    width:device-width 
}

來源

2013-04-17 20:58:51 iConnor

當你禁用縮放（'maximum-scale = 1'）時，用戶通常不喜歡它。 – cimmanon

感謝您的提示！ – iConnor

該元視口代碼似乎做到了，使我的iPhone上的所有內容在桌面和移動設備上使用相同的字體大小更具可讀性。乾杯。 – stu177

您可以根據屏幕寬度選擇字體大小：

/* Large desktop */ 
    @media (min-width: 1200px) { 
     font-size: 18px; 
    } 

    /* Portrait tablet to landscape and desktop */ 
    @media (min-width: 768px) and (max-width: 979px) { 
     font-size: 16px; 
    } 

    /* Landscape phone to portrait tablet */ 
    @media (max-width: 767px) { 
     font-size: 14px; 
    } 

    /* Landscape phones and down */ 
    @media (max-width: 480px) { 
     font-size: 12px; 
    }

要確保手機屏幕上的佈局舒展，你必須使用視meta標籤：

<meta name="viewport" content="width=device-width, initial-scale=1" />

這個元標籤需要在頭標籤內。「設備寬度」將是您的屏幕可以顯示的最大像素。你也可以在那裏設置一個常數值（600px）。

初始縮放比例= 1意味着它會自動縮放到100％。（0.5 => 50％）

來源

2013-04-17 20:44:48

所以這會使文字越小，設備越小？這是相反的問題，文本需要在高分辨率設備上更大，當最大寬度爲例如480px或767px時，簡單地使文本變得更大的問題在於如果桌面瀏覽器窗口被縮小到這個大小，然後文本變得巨大。 – stu177

然後，您只需在較小的媒體查詢中縮小文字。 – iConnor

這將使文本更小的分辨率。通常分辨率更小！=更小的屏幕，只有更少的像素。當您使用響應式設計時，您將添加元標記視口。它將「拉伸」整個屏幕上的佈局，16px的字體大小將足夠好。現在，無論「字體大小」值是什麼，一些移動瀏覽器都會放大內容字體大小，因此它會更具可讀性。 –

自適應網頁設計和高分辨率顯示器（iPhone 4/5）

回答

相關問題