移动端基础知识

一.移动端基础

1.浏览器现状

PC端常用浏览器

360、谷歌、火狐、QQ、百度、搜狗、IE

移动端常用浏览器

UC、QQ、欧朋、百度、360、谷歌、搜狗、猎豹、其他杂牌浏览器

总结

国内的手机浏览器都是根据Webkit修改过来的内核，国内没有自主研发的内核，兼容移动端主要浏览器，处理好Webkit内核浏览器即可

2.手机屏幕现状

移动端设备屏幕尺寸非常多，碎片化严重，但作为开发者我们无需关注这些分辨率，因为我们常用的尺寸单位为px

3.移动端调试方法

·谷歌浏览器的模拟手机调试
·搭建本地Web服务器，手机和服务器一个局域网内，通过手机访问服务器
·使用外网服务器，直接IP或域名访问

二.视口

视口（viewport）就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口，视觉视口和理想视口

a.布局视口（layout viewport）

·一般移动设备的浏览器默认设置了一个布局视口，用于解决早期PC端页面在手机上显示的问题
·iOS和Andorid基本都将这个视口分辨率设为980px，所以PC网页大多都能在手机上显示，只不过元素看上去很小，一般默认可以通过手动缩放网页

b.视觉视口（visual viewport）

视觉视口指用户正在看到的网站区域，我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度

c.理想视口（idea viewport）

理想视口对设备来讲是最理想的视口尺寸，需要手动添加meta视口标签通知浏览器操作，meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一样，简单理解就是，设备有多宽，我们布局视口有多宽

meta视口标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximun-scale=1.0 minimun-scale=1.0">
 

name=“viewport” 代表视口标签
content="width=device-width 内容里包含若干属性，宽度等于设备的宽度（理想视口）
user-scalable=no 用户是否可以缩放视觉视口（yes或no，1或0）
initial-scale=1.0 初始的缩放倍数（大于0的数字）
maximun-scale=1.0 最大的缩放倍数（大于0的数字）
minimun-scale=1.0 最小的缩放倍数（大于0的数字）

三.标准的viewport设置

·视口宽度和设备保持一致
·视口默认的缩放比例是1.0
·不允许用户自行缩放
·最大最小缩放比例都是1.0

四.二倍图

1.物理像素&物理像素比

·a.物理像素指的是屏幕显示的最小颗粒，是物理真实存在的
·我们开发的1px不一定等于1个物理像素，（PC端相同，移动端不一定相同）
·b.PC端和早期手机屏幕是 1CSS像素 = 1物理像素的，后来推出了一个视网膜屏幕，可以把更多的物理像素点压缩进一块屏幕里，从而达到更高分辨率，提升屏幕显示的细腻程度
·c.1个px所能显示的物理像素点的个数，称为物理像素比（屏幕像素比）
·d.pc端和早期的手机屏幕/普通手机屏：1css像素＝1物理像素
·e.视网膜屏幕是一种显示技术，可以把更多的物理像素点压缩至一个屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度

2.多倍图

·对于一张图片在手机中打开，不同的物理像素会放大倍数，导致图片模糊
·在标准的viewport设置中，用倍数来提高图片的质量，解决在高清设备中的模糊问题
·通常使用二倍图，因为iPhone6/7/8的影响，但是现在还存在三倍图四倍图的情况，这个看实际开发公司的需求
·背景图片要注意缩放问题

1.我们需要5050像素的图片直接放到我们的iPhone8里面会放大两倍 100100就会模糊
2.我们采取的是放一个100*100的图片，然后手动将它缩小
3.我们准备的图片比我们实际需要大小大两倍，这种方式就是二倍图

3.背景缩放background-size

background-size属性规定背景图的尺寸

background-size：背景图片宽度，背景图片宽度

·如果只写一个参数，就是宽度，高度会等比例缩放
·里面的单位可以写百分比，是相对于父盒子说的
·cover要完全覆盖div盒子，可能会有一部分显示不全
·contain将图片拉伸到宽度（高度）的最大尺寸，之后高度（高度）不再进行拉伸。高度和宽度等比例拉伸，可能有一部分空白区域

五.移动端开发选择

1. 移动端主流方案

2.单独移动端页面(主流)

通常情况下,网址域名前面加m(mobile)可以打开移动端。通过判断设备,如果是移动设备打开,则跳到移动端页面。
例如：m.taobao.com，m.jd.com，m.suning.com

3.响应式兼容PC移动端

三星电子官网: www.samsung.com/cn/ .通过判断屏幕宽度来改变样式,以适应不同终端。
缺点:制作麻烦，需要花很大精力去调兼容性问题

4.总结

现在市场常见的移动端开发有 单独制作移动端页面和响应式页面两种方案
现在市场主流的选择还是单独制作移动端页面

六.移动端技术解决方案

1.移动端浏览器

移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题。
我们可以放心使用h5标签和css3样式
同时我们浏览器的私有前缀我们只需要考虑添加webkit即可

2.css初始化normalize.css

移动端css初始化推荐使用normalize.css/
·normalize.css：保护了有价值的默认值，修复了浏览器的bug，是模块化的，拥有详细的文档

3.css3盒子模型box-sizing

·传统的宽度计算：盒子宽度=css设置的width+border+padding
·css3盒子模型：盒子宽度=css3设置的宽度width里面包含了border和padding，也就是水，我们css3中的盒子模型，padding和border不会撑大盒子
即box-sizing 为border-box

移动端可以全部c3盒子模型，pc端如果要完全需要兼容，我们就用传统模式，如果不考虑兼容性我们就使用c3

4.特殊样式