CSS和html在移動設備上不能很好地渲染

我有一個我創建的頁面，它可以在桌面上正常工作，但是在移動瀏覽器中搞砸了。CSS和html在移動設備上不能很好地渲染

enter image description here

這是移動版本。我有一個header和一個.container（灰色背景）設置爲寬度100％。在.container我有一個.wrapper設置爲width: 900px;和margin: 0 auto;。爲什麼藍色背景和灰色背景會渲染到頁面大約一半的位置？我可以通過移動設備上的桌面版本創建頁面的最佳方式是什麼？

來源

2013-10-02 Lordking

Codepen鏈接http://codepen.io/tim-hoff/pen/ytGEw – Lordking

我相信你的包裝可能會引起問題。而不是爲對象設置固定寬度：

.wrapper { 
    max-width:900px; 
    width:100%; 
    display:block; //for centering 
    margin:0 auto // for centering 

}

應該解決您的問題並使網站在不同平臺上更具響應能力。祝你好運！ :)

注意

如果你不這樣做，採取費道宜的評論並添加：

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

來源

2013-10-02 23:25:55

這是你的wrapper和li寬度。將它們設置爲百分比。

.wrapper { 
    width: 90%; 
    margin: 0 auto; 
} 

li { 
    width: 30%; 
    .... 
}

來源

2013-10-02 02:42:21

-1

如果你想爲臺式電腦和mobile..Try創建所有寬度percentage.because百分比只適合寬度自動根據畫面的部位resolution.suppose你給像素屏幕是不是在所有的屏幕調節

resolutions.its只能根據你的尺寸進行修復。在你的情況下，請確保所有寬度的百分比。還請遵守用於獲取屏幕寬度的紙張類型頭部分

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

來源

2013-10-02 02:54:06 Rajkumar

CSS和html在移動設備上不能很好地渲染

回答

相關問題