html自适应手机、平板问题

1.1 meta标签：viewport

H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

viewport标签极其属性：

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

每个属性的详细介绍：

属性名	取值	描述
width	正整数 或 device-width 定义视口的宽度	定义视口的宽度，单位为像素
height	正整数 或 device-height	定义视口的高度，单位为像素，一般不用
initial-scale	[0.0-10.0]	定义初始缩放值
minimum-scale	[0.0-10.0]	定义缩小最小比例，它必须小于或等于maximum-scale设置
maximum-scale	[0.0-10.0]	定义放大最大比例，它必须大于或等于minimum-scale设置
user-scalable	yes/no	定义是否允许用户手动缩放页面，默认值yes

对了device-width好像是设备视窗宽度的意思，没有详细查询，如有人知道留言，这里就不作注解

1.2 @media

/* 小屏幕手机端 */
@media (min-width: 0px) and (max-width:768px) {
    .div1{
        width: 100px;
        height: 100px;
        background-color: red;
    }
}

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 768px) and (max-width:992px){
    .div1{
        width: 300px;
        height: 300px;
        background-color: blue;
    }
}

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 992px) {
    .div1{
        width: 500px;
        height: 500px;
        background-color: aqua;
    }
}

1.3 文字自动换行

html内容超出了div或p的宽度 让内容自动换行

{
    width: 100%;  
    height: auto;  
    word-wrap:break-word;  
    word-break:break-all;  
    overflow: hidden;  
}
   

1.3.1 word-wrap

word-wrap: normal|break-word;

normal	只在允许的断字点换行（浏览器保持默认处理，默认值）
break-word	在长单词或 URL 地址内部进行换行。

word-break: normal|break-all|keep-all;

normal	使用浏览器默认的换行规则。（默认值）
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

1.4 七种获得浏览器宽高的方法

• screen.height：用户屏幕高度
• screen.availHeight：用户屏幕可用高度，减去了窗口工具值类的界面特征
• window.innerHeight：浏览器窗口的视口高度，包括水平滚动条
• window.outerHeight：浏览器窗口外部高度
• document.body.offsetHeight：文档中 body 部分的高度
• document.documentElement.clientHeight：文档可显示区域的高度
• document.documentElement.offsetHeight：文档本身的高度(html部分)

1.4.1 区别对比

<script>
	console.log("start--------------------------------");
    console.log("screen.height: " + screen.height);
    console.log("screen.availHeight: " + screen.availHeight);
    console.log("window.innerHeight: " + window.innerHeight);
    console.log("+window.outerHeight: " + window.outerHeight);
    console.log("document.body.offsetHeight: " + document.body.offsetHeight);
    console.log("document.documentElement.clientHeight: " + document.documentElement.clientHeight);
    console.log("document.documentElement.offsetHeight: " + document.documentElement.offsetHeight);
    console.log("end----------------------------------------------")
</script>

• screen.height 和 screen.availHeight 不会随浏览器窗口变化，只与用户屏幕尺寸有关
• window.innerHeight，window.outerHeight，document.documentElement.clientHeight 都随着浏览器窗口变化
• window.innerHeight 等于 document.documentElement.clientHeight 即文档可显示区域的高度一般就是浏览器视口的高度

另外我们发现 document.body.offsetHeight 和 document.documentElement.offsetHeight 并不相等，而我们并未在 body之外添加别的内容或样式。造成两个不等的原因只有一个，就是浏览其默认样式。

现在我们去除浏览器默认样式，在head 中添加如下代码：

<style>
    *{margin: 0; padding: 0}   // 去除浏览器默认样式
</style>

此时再打印 document.body.offsetHeight 和 document.documentElement.offsetHeight，两个值就相等了。