的iPad在橫向模式正在擴大我的網站上 - 我不知道如何解決它

我的測試頁面是：http://dev.my-igloo.net/ps-rwd/的iPad在橫向模式正在擴大我的網站上 - 我不知道如何解決它

我試圖讓我的周圍媒體查詢頭和更改站點根據寬度到瀏覽器寬度 - 該網站必須在iPad和iPhone上工作，目前我正在iPad上測試它，並略微瘋狂。

請記住網站的設計/佈局是不完整的時刻，我只是在這裏初始設置工作之前，我深入完善的一切。我爲每個樣式表設置了不同的背景顏色，以便很容易地看到哪一個被加載。

我有這個在我的腦海標籤：

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

，如果我設置像這樣我的媒體查詢：

<!-- Main Stylesheet --> 
<link rel="stylesheet" type="text/css" href="ps-default.css" /> 

<!-- Main Stylesheet --> 
<link rel="stylesheet" type="text/css" href="ps-default.css" media="screen and (min-width: 769px)" /> 
<!-- 768 wide screens --> 
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (min-width: 481px) and (max-width: 768px)" /> 
<!-- 480 wide screens --> 
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (min-width: 321px) and (max-width: 480px)" />

當我在橫向模式在iPad上測試頁面加載默認樣式表，但縮放，我必須左右滾動才能看到整個佈局或縮放縮放以使其適合屏幕。

我怎樣才能避免這種情況？我認爲，通過具有初始比例設置爲1.0將使負荷，沒有任何放大

然後我改變了我的媒體查詢了一下：

<!-- For Desktop Browsers --> 
<link rel="stylesheet" type="text/css" href="ps-default.css" media="screen and (min-width: 1024px)" /> 
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (min-width: 769px) and (max-width: 1024px)" /> 

<!-- 768 wide screens --> 
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (max-width: 768px) and (orientation:portrait)" /> 
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (min-width: 481px) and (max-width: 767px) and (orientation:landscape)" /> 

<!-- 480 wide screens --> 
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (max-width: 480px) and (orientation:landscape)" />

，然後在iPad上以橫向模式768樣式表被加載和頁面放大 - 我不明白我做錯了什麼。

I're通過這個閱讀：http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193並沒有找到一個解決這個問題。我嘗試過的其他選項包括最小尺度和最大尺度，但是這取消了捏合縮放功能，這是不可取的。

我已經恢復到現在的初始媒體查詢集，並希望有人能幫助我。

來源

2012-01-30 user1178434

找到一個更好的解決方案...看最後的帖子。 – unmircea 2012-12-21 11:00:22

在視口中添加'initial-scale = 1，maximum-scale = 1'解決了它對我來說http://stackoverflow.com/questions/11165460/responsive-site-is-zoomed-in-when-flipping-between-肖像和風景在Ipa – 2013-10-29 17:59:27

據我所知，這似乎更多的是由於Safari計算設備寬度的方式引起的問題。基本上，Safari總是需要基於縱向的設備寬度。因此，當您說width = device-width時，無論方向如何，它總是等於768px。

因此似乎是happenning的是，在橫向模式下，你100％的寬度計算爲768px，即使可用的寬度爲1,024像素。（我在1024像素的屏幕上顯示一個768px的頁面，導致伸展或放大）。

這可以被認爲是溶液給出一個固定的視口寬度。

<meta name="viewport" width="1024" />

這有一個很大的缺點，您的視口不能自動根據設備查看。但是，如果你真的需要這兩個事情發生，你可能需要考慮某種動態服務器端檢測，並具有提供基於來自請求的用戶代理檢測瀏覽器的不同元視口代碼。

來源

2012-01-31 07:16:35 testndtv

我發現了包括Ethan Marcotte在內的大量網站都有相同的問題 - 如果您在iPad上以landscpe模式查看網站，它會加載得很好，只是當您翻轉然後再回到景觀，問題就出現了 - 我不會再擔心它了，因爲它似乎很常見，而且似乎沒有人對此感到困擾。 – user1178434 2012-01-31 10:42:07

是的，這是正確的......所以當你從縱向翻轉到橫向模式時，內容實際上不會迴流，但只是擴大以適應更大的可用寬度...... – testndtv 2012-01-31 11:06:14

這是一種痛苦，但如果其他人可以忍受它 - 我可以... – user1178434 2012-01-31 13:37:23

經過一個早上的測試，我同意其餘的 - 從風景到肖像翻到風景暴露Safari中的錯誤。我發現要解決它的唯一方法是通過使用：

<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />

這使得每個方向在它的適度規模。此修復程序唯一的缺點是無法放大。對於文字較小的網站或較老的觀衆來說，這並不是一個好的解決方案，但除此之外，這種方法無能爲力。

此外，這裏有一個很好的JS hack：https://gist.github.com/901295它允許縮放。但是，一旦縮放，如果方向改變，則相同的舊錯誤設置。

來源

2012-02-25 19:08:30

找到了更好的解決方案。適用於ipad和iPhone，包括橫向和縱向。

<meta name="viewport" content="width=1062px, user-scaleable=yes" />

1062px可以是任何東西，例如：800像素或更大的東西。

來源

2012-12-21 10:59:26 unmircea

@ graham-t在這裏有最好的解決方案IMO，但只有一個問題;現在它不會根據設備分辨率作出響應調整。

該做的伎倆至少對我來說 - 我得到的寬度和橫向模式在iPad上不結垢，再加上它正確地調整大小上的其他設備：

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

來源

2014-01-30 16:18:12

的iPad在橫向模式正在擴大我的網站上 - 我不知道如何解決它

回答

相關問題