爲什麼一個普通的網頁在iOS上出現放大的方式？

爲什麼this jsfiddle page在iOS 6.1上的移動版Safari瀏覽器上查看時顯示爲空？我希望它佔用整個寬度，但它會放大出來。我有如下漂亮無趣的CSS，但我錯過了一些東西。爲什麼一個普通的網頁在iOS上出現放大的方式？

.foo { 
    overflow: auto; 
    overflow-y: hidden; 
    height: 100px; 
    -webkit-overflow-scrolling: touch; 
    white-space: nowrap; 
} 
.foo ul li { 
    display: inline-block; 
    border: 1px blue solid; 
    max-width: 100px; 
    overflow: auto; 
    white-space: normal; 
}

來源

2013-07-18 Patrick Szalapski

我不知道答案100％，但我敢說它的。元。嘗試包括諸如''。 – Chad

添加

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

內<head>

Working example (standalone)

Working example (jsfiddle)

背景：默認情況下，移動Safari會與980px畫布寬度的頁面（見this answer），在「寬度」參數將覆蓋這一點，「設備寬度」自動設置爲任意大小（或縱向/橫向）你正在使用。它最初由Apple推出，但是pretty much everything now supports it。

對於這一點的jsfiddle工作，你需要在meta標籤添加到CSS面板，但它包裝在一個</style>/<style type="text/css">標籤，以便它出現在頭部。此外，普通的嵌入式共享鏈接將無法正常工作，因爲所有內容都包含在iframe中，因此您需要直接打開該內容：.../show/light/

（如果您有Mac，iOS模擬器非常方便這種事情 - 需要安裝的XCode也Chrome開發工具>設置（齒輪圖標，右下）>覆蓋>設備規格）

來源

2013-07-19 07:39:11

FYI，添加視口元標記中的jsfiddle的一種方式是添加在CSS窗格中的下列：<元名稱=「視口」 CONTENT =「初始規模= 1.0，寬度=設備寬度」 /><風格type =「text/css」> –

@DavidTaiaroa謝謝 - 更新！ –

爲什麼一個普通的網頁在iOS上出現放大的方式？

回答

相關問題