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）

示例

<!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:[email protected]">請發送郵件</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視口的相關知識

現在說一下具體步驟

1⃣️動態創建meta

<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>

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>
<!--
<meta name="viewport" content="user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
-->
<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版）

H5移動端—移動端佈局及適配

1.移動端基本環境

2.移動端常見的一些問題

3.移動端適配

如何使用 JS 判斷用戶是否處於活躍狀態

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

❤️‍🔥 Solon Cloud Event 新的事務特性與應用

Redux 入門教程—15redux-thunk 實踐發送 ajax 請求

H5移動端—移動端佈局及適配（rem）

Redux 入門教程—14異步和 redux-thunk

JavaScript系列—class（靜態方法和屬性、實例屬性、私有方法和屬性）

JavaScript系列—函數防抖與函數節流

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結