HTML5 移动页面自适应手机屏幕宽度详解

HTML5 移动页面自适应手机屏幕宽度是现代网页设计中的一个重要技术，并且在移动设备用户增长的背景下显得越来越重要。下面是一个完整的攻略，介绍了如何在HTML5中实现自适应手机屏幕宽度。

什么是HTML5移动页面自适应手机屏幕宽度？

HTML5移动页面自适应手机屏幕宽度是一种通过HTML5结构和CSS样式定义来控制不同分辨率设备页面展示形式的技术。通过使用这个技术，可以让网页在不同分辨率的设备上，保持相同的布局和界面显示效果。

方案一：使用Viewport

Viewport是HTML5中专门为移动设备设计的标签，它可以根据设备屏幕的大小来设置设计视窗的宽度和缩放因子，从而实现移动页面的自适应。下面是一个示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Viewport Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>Viewport Demo</h1>
    <p>This is a demo page for viewport.</p>
</body>
</html>

在上面的代码中，<meta>标签中的viewport属性定义了标签的宽度为设备宽度，缩放因子为1，这样就可以在每个移动设备上自适应地展示页面内容。

方案二：使用媒体查询

媒体查询可以实现根据设备分辨率的不同，改变页面的样式，从而根据不同的设备显示不同的布局及样式，在坚持了Web标准的同时，使网页适应不同的显示分辨率。下面是一个示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Media Query Demo</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #eee;
        }
        .container {
            width: 100%;
            max-width: 960px;
            margin: 0 auto;
            padding: 0 20px;
            background-color: #fff;
            box-sizing: border-box;
        }
        @media screen and (max-width: 768px) {
            .container {
                padding: 0 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Media Query Demo</h1>
        <p>This is a demo page for media query.</p>
    </div>
</body>
</html>

在上面的代码中，使用媒体查询来实现自适应布局，当设备宽度小于等于768px时，.container的padding是10px，否则为20px，这样也可以适应不同分辨率设备的显示。