元視口不縮放在iPad上的網站

我有一個（相當簡單）的網站，我希望自動縮放和調整，使主要內容區域適合在屏幕上沒有在iPad上水平滾動。在橫向模式下，它可以正常工作，但是在縱向模式下，它會將側面的一部分留下來，並且用戶必須水平滾動。它通常適用於我做的其他網站，但對於這一個，我不明白什麼是阻止Safari做這件事。元視口不縮放在iPad上的網站

我加了下面一行HTML的頂部，但它似乎沒有任何效果（我試過像添加initial-scale=1.0等過各種替代方案）

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

可能是什麼原因這不起作用？

澄清

我不是找媒體查詢解決方案。我只是想了解爲什麼某些網站的iPad（和其他觸摸設備）會自動縮小網站以適應屏幕，而在這種情況下，某些網站會導致它無法正常顯示。我只是想找出它的原因。

來源

2014-11-07 jbx

我終於想通了這個問題。 iPad（和大多數觸摸設備）實際上自動縮放網站，如果網站沒有明確設計爲響應，則不需要<meta name="viewport" ... >。

但是，當網站太寬時，這種縮放似乎不起作用。我的內容寬度爲1024像素，由於某些原因觸發了設備關閉縮放。

我將內容的寬度更改爲960像素（我不知道實際的閾值，但我的其他網站可以很好地縮放這個寬度），問題立即得到解決。

添加此答案的情況下，有人正在尋找縮放不在他的網站上工作的原因。

顯然這與有響應的網站無關，這只是當網站很簡單並且擴展足夠時。

來源

2014-12-17 23:19:37 jbx

我用寬度：100％，它解決了我的方向的佈局情況，但似乎媒體查詢，可以幫助過：

@media screen and (orientation:portrait) { 
 
    /* Portrait styles */ 
 
} 
 
/* Landscape */ 
 
@media screen and (orientation:landscape) { 
 
    /* Landscape styles */ 
 
}

讓我們知道它是否工作。

來源

2014-11-12 18:37:53 Zapp

你把'width：100％'放在哪個元素上？我已經把它放在我的'body'標籤上了。 – jbx 2014-11-12 21:15:38

我正在使用normalize（https://necolas.github.io/normalize.css/），對於我需要全寬瀏覽器的所有內容，我使用width：100％。％s對我測試過的所有設備都很好。 @media查詢有幫助嗎？ – Zapp 2014-11-13 03:16:15

存在用於內部容器給定的固定寬度

div#branding{ 
width: 1024px; 
} 

#content{ 
width: 1024px; 
} 

div#footer{ 
width: 1024px; 
}

改變所有的3 width到100%爲@media屏幕

更多@media屏幕的信息可以發現here

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) { 
    div#branding { 
     width: 100%; 
    } 
    #content { 
     width: 100%; 
    } 
    div#footer { 
     height: 40px; /* remove height */ 
     display: inline-block; /* change display:block to display: inline-block; */ 
    } 
}

，它會工作

右側頁腳內容將回落爲左側內容更

screenshot

注：您的頁腳爆發爲固定高度，給出你可以刪除它

固定您的頁腳變化CSS的頁腳

div#footer { 
height: 40px; /* remove height */ 
display: inline-block; /* change display:block to display: inline-block; */ 
}

screenshot

來源

2014-11-13 13:09:32

如果我在'＃品牌'，'＃content'和'＃footer'上做'width：100％'，它們將不會在普通的桌面屏幕上居中，而我不想這麼做。但是，我想了解的是，iPad在某些情況下會使網站規模擴大，以及在其他情況下不能擴展的因素。例如，在這種情況下，我使用完全相同的佈局（居中的標題，所有簡單的）做的另一個網站的iPad調整它很好：http://www.bounce-life-coaching.com – jbx 2014-11-14 14:01:23

忘記添加「@media screens」 – 2014-11-14 14:11:02

更新了答案 – 2014-11-14 14:12:55

根據您在CSS中獲得的規則將需要分配縱向模式，如橫向或縱向，並添加所需的寬度。

@media screen and (orientation:landscape) and (max-width:1024px){ 
    some rules that will be applied to iPad in landscape mode 
}

而且很大很大的區別是，它會在所有1,024像素的屏幕被應用

@media screen and (max-width: 1024px){ 
    some css rules for "normal" screens on max-width: 1024px 
}

編輯：因此，請確保你把你的「容器」 div的100％，在各種模式和調整所有其他元素。你有滾動條實際上是用固定的股利或利潤，影響整個頁面的寬度墊襯

來源

2014-11-13 18:02:33

我認爲meta標籤除了具有最大的最小規模的DOM元素：

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

我也不是什麼知道是否在這一點上會有所作爲。

它在理論上應該工作，連同：

@media only screen and (min-width: 480px) { 
    /* landscape */ 
} 

@media only screen and (max-width: 479px) { 
    /* portrait */ 
}

來源

2014-11-17 23:08:47 Verhaeren

我注意到的是，默認情況下，Safari會自動縮放網頁。但是，如果用戶手動應用某種縮放比例 - Safari會停止其自動縮放比例。在我的情況下，這就是爲什麼它縮放了一些網站，而其他網站卻沒有。

來源

2017-05-10 12:42:35

元視口不縮放在iPad上的網站

回答

相關問題