網站不適用於Ipad和iPhone

Question

這是網站：

問題在於屏幕無法適應視口（第一次加載時側面沒有白色邊距），而且如果縮小並查看整個頁面，也會產生奇怪的大白色邊距。

我正在使用此標簽來嘗試實現，但效果仍然不高：

<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;
}

任何想法我該如何解決？

Answer 1

您需要的是稱為CSS媒體查詢的東西。 基本上，您會為特定的屏幕尺寸創建不同的CSS規則。 例如

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

只要瀏覽器窗口/屏幕寬度大於520px且小於700px，就會將正文背景設置為紅色。

嘗試谷歌搜索'CSS媒體查詢'和'響應式設計'，這將指向你正確的方向

Answer 2

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

#slideshow設置為width:1083px; 這導致網站右側出現空白。 將其更改為100%解決。 即使溢出設置為hidden元素

initial-scale=1.0是最初加載時大小為rending的內容。 它以1：1的像素比率加載，而不是按比例縮小以查看整個頁面。

width=device-width將頁面寬度設置為設備的寬度，iPhone的Mobile Safari上的寬度為320px。 如果您將此更改為width=950 ，將視口的寬度設置為等於站點的寬度，950px。 這將允許用戶完全縮小並查看網站的整個寬度。 Safari會將空白添加到頁面底部。