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

布满荆棘的人生 2023-06-08 13:56 51阅读 0赞

### 1.移动端基本环境 ###

*          viewport 视口(可视区窗口)  默认不设置viewport一般可视区宽度在移动端是980
 *          width 可视区的宽度 (number||device-width)
 *          user-scalable 是否允许用户缩放 (yes||no) iOS10无效 (我们放在事件章节解决)
 *          initial-scale 初始缩放比例
 *          minimum-scale 最小缩放比例
 *          maximum-scale 最大缩放比例
 *          n = window.devicePixelRatio （像素比把一个像素 放大至 n个像素去显示 所以设计图最少750）

示例

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=.5,minimum-scale=.5,maximum-scale=1">
    <title>Document</title>
    <style type="text/css">
    	#box {
    		width: 300px;
    		height: 300px;
    		background: red;
    		margin: auto;
    	}
    </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
    </html>

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

1）常用meta设置

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <meta name="x5-orientation" content="portrait" />  // qq强制横屏或者竖屏显示
    <meta name="x5-fullscreen" content="true" />       // qq设置全屏
    <meta name="screen-orientation" content="portrait"> // uc强制竖屏或横屏显示
    <meta name="full-screen" content="yes">             //uc全屏显示
    <meta name="format-detection" content="telephone=no, email=no" /> //禁止识别电话号码或者邮件
    </head>
    <body>
    	<p>13888888888</p>
    	<a href="tel:18888888888">请拨打电话18888888888</a>   // 此处适用要识别电话号码和邮件
    	<a href="mailto:motao@motao.com">请发送邮件</a>
    </body>
    </html>

2）默认样式

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <style type="text/css">
    body {
    	font-family: Helvetica; //默认字体设置
    }
    body * {
    	-webkit-text-size-adjust: 100%; //禁止文字缩放
    	-webkit-user-select: none; /*在事件章节 去兼容安卓*/ // 选中文字设置
    }
    a, 
    input, 
    button{
    	-webkit-tap-highlight-color: rgba(0, 0, 0, 0); //清除点击阴影
    }
    input, 
    button {
    	-webkit-appearance: none; // 消除按钮圆角
    	border-radius: 0;
    }
    </style>
    </head>
    <body>
    <a href="http://miaov.com">妙味课堂-我是莫涛</a>
    <input type="button" value="按钮">
    <p>妙味课堂-移动端系列公开课</p>
    </body>
    </html>

3）移动端其他问题

**Font Boosting**

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

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <style type="text/css">
    #p1 {
    	font-size: 18px;
    	line-height: 30px;
    	height: 30px;
    }	
    #p2 {
    	font-size: 18px;
    	line-height: 30px;
    }
    /* 
    Font Boosting  在一段文字我们没有给他设置高度的时候，在webkit内核下，文字的大小被浏览器放大了
    	解决办法:
    		1.设置高度
    		2.设置最大高度 max-height 
    */
    </style>
    </head>
    <body>
    	<p id="p1">我是文字呦~~</p>
    	<p id="p2">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
    </body>
    </html>

**Fixed**

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

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <title>Document</title>
    <style type="text/css">
    	html {
    		height: 100%;
    		overflow: hidden;
    		position: relative;
    	}
    	body {
    		height: 100%;
    		margin: 0;
    		overflow: auto;
    	}
    	header {
    		position: absolute;
    		width: 100%;
    		height: 40px;
    		background: rgba(0, 0, 0, .5);
    		color: #fff;
    	}
    	section {
    		padding-top: 40px;
    	}
    </style>
    </head>
    <body>
    <header>我是一个头部</header>
    <section>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    	页面内容<br/>
    </section>
    </body>
    </html>

### 3.移动端适配 ###

1）百分比适配

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

2）viewport适配

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

现在说一下具体步骤

1⃣️动态创建meta

2⃣️使用

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

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

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    (function(){
    	var w = window.screen.width; //获取屏幕尺寸
    	var targetW = 320;  //所有的屏幕宽度都当成320来写
    	var scale = w/targetW; //当前尺寸/目标尺寸 缩放比例
    	var meta = document.createElement("meta"); //创建mete标签
    	meta.name = "viewport"; //注意缩放比例为scale
    	meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""
    	//console.log(scale);
    	document.head.appendChild(meta);
    })();
    </script>
    
    <style type="text/css">
    	body {
    		margin: 0;
    	}
    	div {
    		/* 注意一行四个，宽度是320，所以一个的宽度就是80 */
    		width: 80px;
    		height: 100px;
    		float: left;
    	}
    	.box1 {
    		background: red;
    	}
    	.box2 {
    		background: blue;
    	}
    	.box3 {
    		background: green;
    	}
    	.box4 {
    		background: yellow;
    	}
    </style>
    </head>
    <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    </body>
    </html>

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

3）rem适配

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20230531/8d3b1e93522e4b8185ed215ea834c2fe.png