html5 适配移动设备
“ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> “
手机页面中在<head></head>中加入这句话,可以让页面适应设备的宽度。
width=device-width:内容宽度(<body>内容</body>)为设备宽度,如果你的页面宽度大于设备宽度,就需要修改一下这个属性,不然的话会出现可以页面左右滑动
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style>
.content{
width: 120%; /* 内容的宽度*/
background-color: yellow;
position: absolute;
top: 0;
bottom: 0;
}
</style>
</head>
<body class="content">
html5 hello world
</body>
</html>