確保顯示器不拿起手機

Question

@media查詢我建立的一個具有使用@media查詢四種不同的佈局，一個漂亮的模板：

850 + PX寬度
< 850像素寬度
iphone景觀
iphone肖像

它工作真棒，直到你的尺寸顯示器窗口向下跌破480像素（iphone景觀），然後它開始拿起小尺寸@media查詢。

有什麼辦法可以避免這種情況？

Answer 1

我個人認爲在較小的瀏覽器窗口大小下顯示「iPhone」佈局是可取的，因爲您的內容可能已針對該佈局進行了優化，但是如果您真的想要阻止此操作，您可以使用device-width財產@media聲明。類似@media only screen and (max-device-width: 720px) { ... }的目標將以設備寬度而不是視口寬度爲目標。比較this（視口寬度）與this（設備寬度）的行爲。玩弄數值（更改min至max，更改像素大小等）並觀察行爲。另外，不要忘記你可以結合@media規則，例如@media (min-width: 400px) and (max-width: 600px) { ... }。看看什麼適合你。

這種方法的問題是，移動設備有各種形狀和大小，所以你可能會認爲你沒有計劃在不同的移動設備（讓我們只說一個Android手機......）上投放不受歡迎的風格。但是，根據您的需求，這可能對您無關緊要。

這裏是一個示例媒體查詢和大小的列表，以指導您，如果您決定走這條路線：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/（對於缺乏工作鏈接感到抱歉;顯然我在StackOverflow上不夠酷，無法發佈多個鏈接還）...