網站不適合在iPad和iPhone

的問題是，在屏幕doesn't適應視口（在兩側沒有白邊時首先加載），也使得一個奇怪的白色的大裕權如果縮小並看到整個頁面。

I'm使用此標記來努力實現，但仍然doesn't工作太多：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes"> 
<meta name="apple-mobile-web-app-capable" content="yes" />

這是我的CSS：

body { 
background-color:#fff; 
font-family:'Droid Sans', arial, sans-serif; 
color: #777; 
width: 100%; 
margin: 0; 
} 
#page { 
width: 950px; 
margin: 0px auto; 
padding:0px; 
background-color:#fff; 
z-index: 0; 
}

任何想法如何，我可以修復它？

來源

2012-12-14 codek

您的問題似乎是你的幻燈片和viewport標籤：

#slideshow設置到width:1083px;這是造成您的網站右側的空白。將其更改爲100%即可解決該問題。即使溢出設置爲hidden，元素

initial-scale=1.0是大小在最初加載時正在發生的事情。它以1：1像素比加載，而不是縮小以查看整個頁面。

width=device-width將您的頁面寬度設置爲設備寬度，iPhone的Mobile Safari爲320px。如果您將其更改爲類似width=950的設置，則會將視口的寬度設置爲與您的網站的寬度相同，即950px。這將允許用戶完全縮小並查看整個網站的寬度。 Safari會將空白添加到頁面的底部。

來源

2012-12-14 22:16:09 djfarrelly

做一些研究，那固定了白色空間！非常感謝，現在我看到了什麼問題 – codek

你需要的是一種叫做CSS媒體查詢的東西。基本上你可以爲特定的屏幕尺寸創建不同的CSS規則。例如

@media screen and (max-width: 700px) and (min-width: 520px) { 
    body { 
    background: red; 
    } 
}

將每當瀏覽器窗口/屏幕寬度比520px更大和小於700像素更小的設置體背景紅色。

嘗試google搜索「CSS媒體查詢」和「響應式設計」，即會指出你在正確的方向

來源

2012-12-14 20:29:49

謝謝我打算對 – codek

網站不適合在iPad和iPhone

回答

相關問題