四、移动适配

文章目录

四、移动适配

移动端适配

viewpoint视口
媒体查询

参考文章

移动端适配

移动端Web页面，即常说的H5页面、手机页面、webview页面；

手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑安卓/IOS的各种尺寸设备上的兼容，针对移动端设备的页面，设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备；

移动端适配的目的：在不同尺寸的手机设备上，页面“相对性的达到合理的展示”或者“保持统一效果的等比缩放”；

viewpoint视口

visual viewport：可见视口，即屏幕宽度；
layout viewport：布局视口，即DOM宽度；
idea viewport：理想适口，使布局视口就是可见视口；
visual viewport = layout viewport * scale
获取屏幕宽度（visual viewport）的尺寸：window. innerWidth/Height
获取DOM宽度（layout viewport）的尺寸：document. documentElement. clientWidth/Height

移动设备默认的 viewport 是 layout viewport，而我们想要的是 idea viewpoint，我们通过使用 meta 标签来实现我们想要的效果。

meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，事实也证明这个东西还是非常有用的。

在苹果的规范中，meta viewport 有6个属性：

width：设置layout viewport 的宽度，为一个正整数，或字符串"width-device"；
initial-scale：设置页面的初始缩放值，为一个数字，可以带小数；
minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数；
maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数；
height：设置layout viewport的高度，这个属性对我们并不重要，很少使用；
user-scalable：是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许；

理想视口中的网页用户最理想的宽度，用户进入页面的时候不需要缩放。很明显，所谓的理想宽度就是浏览器（屏幕）的宽度了。

<meta name="viewport" content="width=device-width">

然而，这段代码其实也并不完美，在IE浏览器中，由于横屏竖屏的切换会对其造成影响，为了解决这个兼容性的问题，再加上一句。

<meta name="viewport" content="width=device-width,initial-scale=1">

width=device-width 可以把布局视口设置成为浏览器（屏幕）的宽度。initial-scale=1 的意思是初始缩放的比例是1，使用它的时候，同时也会将布局视口的尺寸设置为缩放后的尺寸。

加了这行代码，页面的宽度就会跟要适配的设备宽度一致啦。

媒体查询

媒体指的就是各种设备（移动设备,PC设备），查询指的是要检测属于哪种设备。媒体查询的目的是通过查询当前设备属于哪种设备,让网页能够在不同的设备下正常的预览。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

我们将不同的设备划分为不同的类型，媒体类型一共分为四类：

screen（电脑屏幕,平板电脑,智能手机）
speech（屏幕阅读器等发声设备）
print（打印设备）
all（所有的设备）

媒体特性用来描述设备的特点，以下是常用的媒体特性：

width 网页显示区域完全等于设置的宽度
height 网页显示区域完全等于设置的高度
max-width / max-height 网页显示区域小于等于设置的宽度
min-width / min-width 网页显示区域大于等于设置的宽度
orientation: portrait (竖屏模式) | landscape (横屏模式)

语法关键字可以将媒体类型和媒体特性链接到一块,进行设备检测。

and 可以将多个媒体特性链接到一块,相当于且
not 排除某个媒体特性相当于非,可以省略
only 指定某个特定的媒体类型, 可以省略

媒体查询的语法分为外联式语法和内联式语法。外联式语法是将 media 在 head 部分引用，内联式语法是将 media 在中引用。

外联式语法：

<link rel="stylesheet" type="text/css" href="" media="screen"> 
<link rel="stylesheet" type="text/css" href="" media="print">  
<link rel="stylesheet" type="text/css" href="" media="all">
<link rel="stylesheet" type="text/css" href="01.css" media="only screen and (max-width: 420px)">

内联式语法：

<style type="text/css">
	@media screen {
		选择器{
			属性：属性值;
		}
	}
</style>

一个简单的媒体查询实例：

<!DOCTYPE html>
<html>
<head>
	<title>媒体适配</title>
	<meta charset="utf-8">
	<style>
		div{
			width: 600px;
			height: 600px;
			background-color: red;
		}
		@media (max-width: 800px) {
			div{
				width: 500px;
				height: 500px;
				background-color: yellow;
			}
		}
		@media (max-width: 500px) {
			div{
				width: 300px;
				height: 300px;
				background-color: blue;
			}
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

当屏幕宽度大于800时，显示一个600*600的大红块

小于或等于800时，显示一个500*500的黄色div。

同理，屏幕宽度小于等于500时，显示一个300*300的蓝色div