視口設置不適用於iPhone

-1

我已經嘗試了視口設置的各種變化，但感覺CSS中的某些東西會導致覆蓋我爲iPhone查看指定的任何內容。視口設置不適用於iPhone

最令人沮喪的是，我創建了另一個網站使用相同的CSS和iPhone查看不是該網站的問題。

這是page我無法用全屏查看iPhone。我應該注意的是，它在iPad上都能正常工作，無論是在水平視圖中，還是在水平方向上的&。

標籤使用：

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

來源

2014-11-14 BureauSF

對於iPhone使用：

<meta name="viewport" content="width=device-width" />

和媒體查詢：

@media only screen and (min-width: 240px) and (max-width: 415px) { 

}

忘記了iPhone 6加這是414px寬

iPhone 6's尺寸爲375×667和iPhone 6 Plus是414×736

所以讓那些長時間工作的視圖，你需要你的媒體查詢將高達736這樣：

@media only screen and (min-width: 240px) and (max-width: 736px) { 

}

來源

2014-11-14 21:09:53

OK，改變視口以上，但依然沒能看到完整的頁面寬度在縱向視圖。看着媒體查詢，這裏是我目前有：@media screen { div＃head { position：fixed; } /*不要在家中嘗試*/ * html { overflow-y：hidden; } * html body { overflow-y：auto; 身高：100％; 填充：0 1em 0 14em; font-size：100％; } * html div＃head { position：fixed; } /*全部完成。 */ } – BureauSF 2014-11-16 00:40:27

@BureauSF我需要一個JSFiddle或更新您的原始文章的所有代碼和答覆在這裏，所以我知道你做到了。否則，我有點在黑暗中拍攝。如果你有我所擁有的，那麼問題在於你的CSS不是視口/媒體查詢。 – 2014-11-17 19:23:07

@BureauSF哦，現在我明白你的意思了（也許？）。長視圖（你稱之爲全寬）不會被這個問題所困擾，因爲iPhone 6的尺寸是375×667，而iPhone 6 Plus是414×736.所以讓那些看到我的編輯 – 2014-11-17 19:37:29

嘛，當然它不會顯示頁面的整個寬度，只要這條線在這裏的原因是：

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

你的頁面的寬度大約爲560像素，同時在iPhone屏幕的寬度爲320像素〜和〜420PX之間。

我可能建議您使用媒體查詢來使您的網站響應？

喜歡的東西

@media all and (max-width: 559px) 
{ 
    //Insert mobile CSS here 
}

來源

2014-11-14 21:10:29 David

好吧，我刪除了initial-scale = 1部分並添加了媒體查詢，但仍然沒有在垂直iPhone上獲得完整的頁面寬度。在水平視圖中，頁面加載放大，但至少我可以捏成全角，這在垂直視圖中是不可能的。 – BureauSF 2014-11-17 18:22:03

@BureauSF你必須改變CSS才能在移動設備上工作。例如。 [的jsfiddle]（http://jsfiddle.net/qxy16ozn/） – David 2014-11-17 18:24:49

視口設置不適用於iPhone

回答

相關問題