視iPhone和iPad的畫像

，我必須設置這個視口：

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

，這看起來偉大在我的iPad上的風景。但在我的iPhone上該網站一切看起來很大！並在景觀它有點太寬......這是否有什麼關係與視口或做我需要做一個媒體查詢我的CSS頁面包裝：

.contentPowell { 
background-color: #FFF; 
width: 1024px; 
min-height: 300px; 
margin: 0 auto; 
box-shadow: 12px 0 15px -4px #888, -12px 0 8px -4px #888; 
position: relative; 
z-index: 999999; 
padding-bottom: 30px; 
}

我的頁腳

？

.footerPowell{ width:1024px; }

來源

2014-01-28 user1269625

您的意圖是最初是否適合iPhone屏幕上的1024像素佈局，您是否嘗試將初始比例更改爲更小的？請問例如 – Miro

？ – user1269625

如果是我，我會打造iPhone版320像素寬度，並使用1.0的視口就像你在你的例子都有。您當前的代碼是爲1024像素構建的，因此視口使iPhone視圖大約可以顯示1/3，並且可以向左和向右滾動。

下面是一個Iphone版本的示例，內置320px，使用相同的代碼，只是爲寬度更改了一些元素，以及下面顯示的次要css更新。

打開這在iPhone上看到一個觀點，我認爲你打算： http://miroapps.com/test.html

<style type="text/css"> 
    .entry-content ul{ list-style:none; float:left; width:90%; } 
    .entry-content ul li{ float:left; 
         /*width:33%;*/ 
         background-color:#000; margin:5px; max-height:234px; padding-bottom:30px; } 
    .entry-content ul li a{ color:#FFF; text-decoration:none; } 
    .entry-content ul li a:hover{ text-decoration:none; } 
    .entry-content ul li a:visited{ color:#FFF; } 
    .entry-content ul li a h2{ text-align:center; margin-bottom:0px; } 
    .entry-content ul li a h2 a{ } 
    .entry-content ul li a h2 a img{ margin-top:15px; } 

    .contentPowell { 
     width: 320px; 
    } 

    .entry-content { 
     width:320px; 
    } 
</style>

你會再離開現有代碼到位IPAD，也許只是做一個設備檢測以某種方式包括320px覆蓋僅適用於iphone。或者，僅包含一個僅適用於iphone的css類，並將其包含在內。

來源

2014-02-01 23:36:37 Miro

好的，這工作得很好，但我的iPhone滾動到正確的..如何解決這個問題？ – user1269625

我也看到了。在你的HTML和css定義中有很多事情要做，應該清理這個新的用法。這可能是您的頁腳定義。最簡單的情況：我設置html body標籤的寬度爲320px，滾動消失。儘管這是一個黑客攻擊，但是該頁面上存在大量過多的CSS，應該對其進行清理或篩選。 – Miro

視iPhone和iPad的畫像

回答

相關問題