浏览器现状（PC端常用浏览器，移动端常用浏览器，总结），手机屏幕现状，移动端调试方法，视口（布局视口，视觉视口，理想视口，meta视口标签）

浏览器现状

PC端常用浏览器

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

移动端常用浏览器

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

总结

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

手机屏幕现状

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

移动端调试方法

谷歌浏览器的模拟手机调试

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

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

视口

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

布局视口（layout viewport）

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

视觉视口（visual viewport）

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

理想视口（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的数字）