ios设置H5页面宽度 h5 页面设置多大

在编写移动端网页时需要注意如下几点：

1. 首先，在创建好的 .html 页面中需要设置 Viewport

<!--
	viewport 是用户网页的可视区域（视区）
	手机浏览器把页面放在一个虚拟的“窗口”中（viewport），该窗口通常比屏幕宽（其默认是980px），
	这样就不需要把网页挤到很小的窗口中去（否则会破坏没有针对手机浏览器优化网页的布局），
	用户可以通过放大、缩放来查看网页的内容。
-->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

2. 单位的使用
   首先我们需要明白一些单位作用：px一般都是固定的大小、 em是参考其父级元素的font-size所设置的值（因此，首行缩进经常会用到：text-indent:2em;）、 rem则是参考的html下的font-size的值，是相对的
   在移动端开发中，为了能够自适应，不要出现 px 单位（除非确定的元素）
   使用：
   1）百分比
   2）rem
   3）屏幕宽度不需要给出，使其自适应即可
   4）文字大小使用 rem
   注意：页面汇总 rem 参考的是html中的font-size的值，为了方便计算，将 html 中的字体大小设置为：font-size:50px; 这样之后的测量中，将px单位直接 *0.01 即可。
3. 移动端开发中无需考虑浏览器的兼容性问题，因此H5、C3、flex布局等均可使用
4. 补充：为了能够更好的适应多种屏幕，可以加上媒体查询，改变不同屏幕下的html中的font-size的大小

@media screen and (max-width: 374px) {
    html{
        /*让rem做一个基数*/
        font-size: 40px;
    }
}
@media screen and (min-width: 374px) and (max-width: 768px) {
    html{
        /*让rem做一个基数*/
        font-size:50px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    html{
        /*让rem做一个基数*/
        font-size:95px;
    }
}
@media screen and (min-width: 1024px) {
    html{
        /*让rem做一个基数*/
        font-size:130px;
    }
}

flex伸缩布局使用选择：
1.传统的pc端网站，考虑兼容性，尽量不用弹性布局和css3等效果
2.假如不兼容ie低版本浏览器，可以使用
3.写响应式网站或者手机端的（移动端）网页的时候可以随便使用

如下，是我在学习移动端开发之后，写的简单demo，大家可以参考

页面配置上需要注意

• 视图 （viewport）
• 点击响应延迟3毫秒
  原因：为了判断用户是否在双击，快速去响应用户的双击事件，因此引入了 fastclick.js
  下载使用：https://www.bootcdn.cn/fastclick/ （CDN）
                    https://github.com/ftlabs/fastclick （GitHub上下载）
  配置和使用（基于vue项目来实现）

<script src='/static/js/fastclick.js'></script>
<script>
	if ('addEventListener' in document) {
	document.addEventListener('DOMContentLoaded', function() {
		FastClick.attach(document.body);
	}, false);
}
</script>