移动端基础

浏览器现状

• PC端浏览器
• 移动端浏览器
  • 兼容好，重点关注webkit即可

手机屏幕现状

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

移动端调试方法

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

视口

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

布局视口layout viewport

• 解决早起的PC端页面在手机上显示的问题

视觉视口 visual viewport

• 用户正在看到的网站区域就这个

理想视口 ideal viewport

• 为了使网站在移动端有最理想的浏览和阅读宽度而设定
• 需要手动填写meta视口标签通知浏览器操作