61,115
社区成员
发帖
与我相关
我的任务
分享网页右上角和右下角有空白边区域
网站在电脑上显示正常，但是用iPad，手机等设备浏览（PC页面），就会出现头部和底部右侧有空白边区域，应该是宽度小于多少px就变成这样了，但是不知道是什么原因引起的，不知道在哪里修改，请广大网友提供一下修改思路吧，多谢！
...全文
请发表友善的回复…
发表回复
weixin_45511893 2020-06-27
- 打赏
- 举报
感谢提供解答，问题已经解决了，给body加了一个最小宽度值就搞定了。
kmokd 2020-06-17
- 打赏
- 举报
依次检查：
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%;}
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%;}
