本文介绍如何为手机端网页进行适配，并确保在需要时显示滚动条。通过设置视口、调整字体大小及使用rem单位，实现不同设备上的良好显示效果。
background-size: cover;
overflow:auto;//需要出现scroll
字体和高度都可以用rem
overflow:auto//需要出现scroll，不需要不出现scroll
手机适配头部必须加的东西:
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" />
<script type="text/javascript">
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth / 640;
var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)) {
var version = parseFloat(RegExp.$1);
if (version > 2.3) {
document.write('<meta name="viewport" content="width=640, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
} else {
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
} else {
document.write('<meta name="viewport" content="width=640, user-scalable=no, maximum-scale=1">');
}
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
