目录
- 1、常见浏览器
- PC端
- 移动端
- 2、手机屏幕
- 3、移动端调试方法
- 4、视口
- 4.1 布局视口 layout viewport
- 4.2 视觉视口visual viewport
- 4.3 理想视口 idea viewport **
- meta视口标签
- 5、二倍图
- 1、物理像素和物理像素比
- 6、多倍图
- 7 背景缩放background-size
- 移动端背景图展示
- 8、移动端主流方案
- 8.1单独制作移动端页面
- 8.2响应式页面兼容移动端
- 9、移动端技术解决方案
- 9.1 移动端浏览器
- 9.2CSS初始化normalize.css
- 9.3CSS3盒子模型box-sizing
- 9.4 特殊样式
- 链接点击清除高亮
- 清除按钮、输入框默认样式
- 禁用长按页面时弹出菜单
1、常见浏览器
PC端
360、谷歌、百度、火狐、qq、搜狗、IE
移动端
UC、百度、360安全、谷歌、搜狗、QQ、欧朋、猎豹、夸克
国内的UC\QQ\百度等手机浏览器都是根据webkit修改过来的内核，国内没有自主研发的内核
因此，兼容移动端主流浏览器，处理webkit内核浏览器即可
2、手机屏幕
常见移动端手机屏幕尺寸，参考https://material.io/devices
前端单位px
3、移动端调试方法
（1）chrome devtools(谷歌浏览器)的模拟手机调试
（2）搭建本地web服务器，手机和服务器在同一个局域网内，就可以通过手机访问服务器
（3）使用外网服务器，直接IP或域名访问
4、视口
viewport是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口
4.1 布局视口 layout viewport
IOS、Android基本都将布局视口分辨率设置为980px，所以PC的网页大多能在手机上呈现，只不过元素看上去很小
4.2 视觉视口visual viewport
是用户正在看到的网站的区域
可以通过缩放操作视觉视觉，但不会影响布局视口，布局视口仍保持原来的宽度
4.3 理想视口 idea viewport **
- 为了使网站在移动端有最理想的浏览和阅读宽度而约定
- 理想视口对设备来讲，是最理想的视口尺寸
- 需要手动添加meta视口标签通知浏览器操作
- meta视口标签的主要目的：布局视口的宽度应该于理想视口的宽度一致，简单理解就是设备有多宽，布局的视口就有多宽
meta视口标签
| 属性 | 说明 |
|---|---|
| width | 宽度设置的是viewport宽度,可以设置device-width特殊值 |
| initial-scale | 初始缩放比，大于0的数 |
| maximum-scale | 最大缩放比，大于0的数 |
| minimum-scale | 最小缩放比，大于0的数 |
| user-scalable | 用户是否可以缩放,yes或no(1或0) |
标准的viewport设置
- 视口宽度和设备比例保持一致
- 视口默认缩放比例1.0
- 不允许用户自行缩放
- 最大允许缩放比例1.0
- 最小允许缩放比例1.0
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
5、二倍图
1、物理像素和物理像素比
- 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好的
- 开发时的1px不一定等于1个物理像素
- PC端页，1个px等于1个物理像素，移动端不一定
- 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
maximum-scale=1.0,minimum-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color: orange;
}
/*在iphone8里，1px开发像素=2个物理像素*/
</style>
</head>
<body>
<div></div>
</body>
</html>
移动端：
PC端：
6、多倍图
- 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
- 通常使用二倍图，因为iphone6/7/8的影响，但是现在还存在三倍图、4倍图的情况
- 背景图片要注意缩放问题
/*在iphone8里，1px开发像素=2个物理像素*/
img{
/* 原始图片100*100px */
width:50px;
height: 50px;
}
7 背景缩放background-size
规定背景图像尺寸，
参数值
- 1px
- 50%百分比（百分比相对于父盒子）
- cover，完全覆盖父盒子
- contain，等比例拉伸，宽度或高度铺满后就不再拉伸，可能有部分空白区域
background-size:背景图宽度 背景图高度;//只写一个就是宽度，高度等比例缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
border: 1px red solid;
background: url(../images/media/pig.jpg) no-repeat;
background-size: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
border: 1px red solid;
background: url(../images/media/pig.jpg) no-repeat;
background-size: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 400px;
border: 1px red solid;
background: url(../images/media/pig.jpg) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 400px;
border: 1px red solid;
background: url(../images/media/pig.jpg) no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
移动端背景图展示
以iphone8为例，移动端展示背景图如果要保证背景图的清晰度，页需要将background-size设置为图片的一半，之后在视网膜屏放大2倍后，就不会影响图像的清晰度
8、移动端主流方案
8.1单独制作移动端页面
在浏览器打开时，如果使用的移动设备，就跳到专门的移动端页面
8.2响应式页面兼容移动端
通过判断屏幕宽度改变样式
缺点：制作麻烦，需要花费精力调试兼容问题
9、移动端技术解决方案
9.1 移动端浏览器
移动端浏览器基本以webkit内核为主，因此就考虑webkit兼容问题，可以使用H5和CSS3样式，同时浏览器前缀只需要考虑添加webkit即可
9.2CSS初始化normalize.css
移动端css初始化推荐使用normalize.css
官网地址：http://necolas.github.io/normalize.css
9.3CSS3盒子模型box-sizing
padding和margin不会撑大盒子
box-sizing:content-box;//传统盒子模型
box-sizing:border-box;//css3盒子模型
如何选择：
- 移动端可以全部CSS3
- PC端要完全兼容时，用传统模式。
- PC端不考虑兼容，选择CSS3
9.4 特殊样式
链接点击清除高亮
//设置为透明色
-webkit-tap-highlight-color:transpartant;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
-webkit-tap-highlight-color: transparent;
}
</style>
</head>
<body>
<a href="#">链接清除</a>
</body>
</html>
原来：点击后有个蓝色高亮
清除后点击就没有了
清除按钮、输入框默认样式
移动端浏览器ios有默认外观，需要加上下边的属性才能给按钮和输入框自定义样式
-webkit-appearance:none;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
-webkit-tap-highlight-color: transparent;
}
input{
-webkit-appearance:none;
}
</style>
</head>
<body>
<a href="#">链接清除</a>
<input type="button" value="点击">
</body>
</html>
默认：
清除：
禁用长按页面时弹出菜单
img,a{
-webkit-touch-callout:none;
}
