移动Web开发基础学习总结

一、移动端基础

1. 浏览器现状

2. 手机屏幕现状

3. 常见移动端屏幕尺寸

4. 移动端调试方法

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

总结：

• 移动浏览器我们主要对webkit内核进行兼容
• 我们现在开发的移动端主要针对手机端开发
• 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一
• 学会用谷歌浏览器模拟手机界面以及调试

一、视口

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

1. 布局视口 layout viewport

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

2. 视觉视口 visual viewport

• 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。
• 可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

3. 理想视口 ideal viewport

• 为了使网站在移动端有最理想的浏览和阅读宽度而设定