html5

最新推荐文章于 2024-07-17 16:17:24 发布

原创最新推荐文章于 2024-07-17 16:17:24 发布 · 342 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用HTML5中的viewport元标签使网页内容自适应不同尺寸的移动设备屏幕，并通过示例代码展示了如何设置页面宽度及缩放比例。

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>