【移动布局基础】

1、浏览器

PC端浏览器：360、Chrome、Firefox、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。。。

移动端浏览器：uc浏览器、QQ浏览器、欧朋浏览器、百度手机浏览器、搜狗手机浏览器、猎豹浏览器。。。

国内的uc浏览器、QQ浏览器、百度手机浏览器等都是根据Webkit修改过来的内核，国内尚无自主研发的内核

总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可

2、手机屏幕

Android分辨率主要：480*800、480*854、720*1280、1080*1920等

ios分辨率主要：640*960、640*1136、750*1334、1242*2208等

无需关注这些分辨率，因为常用的尺寸单位是px

常见移动端屏幕尺寸：3.5、4.0、4.5、4.7、5.2、5.5、5.7、6.4、7.0、7.9

3、移动端调试

① Chrome devTools的模拟手机调试

② 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器

③ 使用外网服务器，直接ip或域名访问

4、视口（viewport）

浏览器显示页面内容的屏幕区域，分为布局视口（layout viewport）、视觉视口()、理想视口()

(1) 布局视口

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

(2) 视觉视口

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

(3) 理想视口

对设备来说是最理想的视口尺寸，需要手动填写meta视口标签通知浏览器操作

meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备多宽，布局视口就多宽

5、meta视口标签

以下是为移动端而用的：

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

height ： 视口的高度
width ： 视口的宽度

device-height： 设备屏幕的输出高度
device-width ：设备屏幕的输出宽度

initial-scale：初始比例，页面加载时的默认比例1.0（一般都是1.0，如果写2.0就是以两倍显示）
user-scalable：指定用户是否可以对页面进行缩放 yes允许/no不允许
minimum-scale：最小允许缩放的比率1.0（一般就是1.0）
maximum-scale：最大允许缩放的比率1.0（一般就是1.0）

width=device-width 布局视口宽度=设备宽度

不允许用户缩放

加此设置与默认按980px像素显示的效果对比：

6、二倍图

(1) 物理像素&物理像素比

物理像素-分辨率，在屏幕上真实存在如1334*750px

如果在PC端1物理像素和写代码时的1px是一一对应相等的，在手机上是不一定的

如iPhone8屏幕分辨率1334*750px，如果在屏幕中写入一个300*300px的div盒子，显示是这样的（没有占一半左右）：

 

盒子改成375*375的盒子，宽度刚好，说明iPhone8 物理像素比是2，也就是在iphone8里代码里1px=2物理像素

 

视网膜屏技术原理，把更多物理像素压缩后，屏幕内容显示更清晰

(2) 1px=2物理像素的问题对文字或纯色块盒子影响较小，对颜色丰富的图片影响较大

场景：需要一个50*50px的图片，直接放到iPhone8里面会放大两倍变成100*100px，会变模糊

处理办法：准备一个100*100px的图片，然后手动把这个图片缩小为50*50px，在放到iPhone8中，放大后还是原来的100*100，就不会变模糊了，也就是准备比实际需要的大两倍的图片即可，也就是二倍图