H5移动端—移动端布局及适配

1.移动端基本环境

•         viewport 视口(可视区窗口)  默认不设置viewport一般可视区宽度在移动端是980
•         width 可视区的宽度 (number||device-width)
•         user-scalable 是否允许用户缩放 (yes||no) iOS10无效 (我们放在事件章节解决)
•         initial-scale 初始缩放比例
•         minimum-scale 最小缩放比例
•         maximum-scale 最大缩放比例

•         n = window.devicePixelRatio （像素比把一个像素 放大至 n个像素去显示 所以设计图最少750）

示例

2.移动端常见的一些问题

1）常用meta设置

  // qq强制横屏或者竖屏显示
       // qq设置全屏
 // uc强制竖屏或横屏显示
             //uc全屏显示
 //禁止识别电话号码或者邮件


	
13888888888
	请拨打电话18888888888   // 此处适用要识别电话号码和邮件
	请发送邮件

2）默认样式

妙味课堂-我是莫涛

妙味课堂-移动端系列公开课

3）移动端其他问题

Font Boosting

（Font Boosting  在一段文字我们没有给他设置高度的时候，在webkit内核下，文字的大小被浏览器放大了
    解决办法:
        1.设置高度
        2.设置最大高度 max-height ）

	
我是文字呦~~
	
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字

Fixed

（在有些安卓手机上面会抖动，尽量不用吧，but和同事讨论，现在大家都使用这个也没发现啥问题）下面例子是使用absolute实现的固定定位

我是一个头部

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

	页面内容

3.移动端适配

1）百分比适配

注意，高度无法百分比，必须设置具体的值（px）

2）viewport适配

即动态的变化viewport里面的值，先回忆一下viewport视口的相关知识

现在说一下具体步骤

1⃣️动态创建meta

2⃣️使用

	div {
		/* 注意一行四个，宽度是320，所以一个的宽度就是80 */
		width: 80px;
		height: 100px;
		float: left;
	}

最后看一下完整代码，会发现不管是什么设备，宽度统一显示320px

下面两个适配通过案例去说明

3）rem适配

4）弹性盒模型（box版和flex版）