網站在電腦上顯示正常，但是用iPad，手機等設備瀏覽（PC頁面），就會出現頭部和底部右側有空白邊區域，應該是寬度小于多少px就變成這樣了，但是不知道是什么原因引起的，不知道在哪里修改，請廣大網友提供一下修改思路吧，多謝！
uj5u.com熱心網友回復：
依次檢查：1.在網頁的<head>中增加以下代碼，讓網頁的寬度自動適應手機螢屏的寬度
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
2.使用css3單位rem，通過js定義，不同寬度范圍里定義不同的基數值。代碼如下：
<script type="text/javascript">
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//其中“20”根據你設定的html的font-size屬性值做適當的變化
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
3.不使用絕對寬度：由于網頁會根據螢屏寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。高度設百分比無效。
4.字體也不能使用絕對大小（px），而只能使用相對大小（em/rem）。
5.流動布局（fluid grid）：CSS中加入
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
6.應用CSS的@media規則：
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
上面的代碼意思是，如果螢屏寬度小于400像素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar塊不顯示（display:none）。
7.圖片的自適應（fluid image）：除了布局和文本，"自適應網頁設計"還必須實作圖片的自動縮放。這只要一行CSS代碼：
img { max-width: 100%;}
這行代碼對于大多數嵌入網頁的視頻也有效，所以可以寫成：
img, object { max-width: 100%;}
uj5u.com熱心網友回復：
感謝提供解答，問題已經解決了，給body加了一個最小寬度值就搞定了。轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/35408.html
標籤：HTML(CSS)
上一篇：孫末耶的學習之路