04pink--已打印--移动端.docx

移动端基础
浏览器现状
①PC端常见浏览器
360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。
②移动端常见浏览器
UC浏览器、QQ浏览器、欧朋浏览器、百度手机浏览器、360安全浏览器、谷歌浏览器、搜狗手机浏览器、猎豹浏览器以及其他杂牌浏览器
国内的UC和QQ，百度等手机浏览器都是根据webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统就是基于Android修改开发的一样。
★总结：兼容移动端主流浏览器，处理webkit内核浏览器即可。
手机屏幕现状
①移动端设备屏幕尺寸非常多，碎片化严重。
②Android设备有多种分辨率：480*800，480*854，540*960，720*1280，1080*1920等，还有传说中的2K，4K屏
③近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640*960,640*1136,750*1334,1242*2208等
④作为开发者无需关注这些分辨率，我们常用的尺寸单位是px
常见移动端屏幕尺寸
屏幕尺寸请参考/
作为前端开发，不建议大家去纠结dp，dpi，pt，ppi等单位。
移动端调试方法
①Chrome DevTools(谷歌浏览器)的模拟手机调试
②搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
③使用外网服务器，直接IP或域名访问
视口 viewport
视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。
布局视口 layout viewport
①一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
②iOS、Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
视觉视口 visual viewport
①字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。
②我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
理想视口 ideal viewport
①为了使网站在移动端有最理想的浏览器和阅读宽度而设定
②理想视口，对设备来讲，是最理想的视口尺寸
③需要手动添加meta视口标签通知浏览器操作
④meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽,我们布局的视口就多宽
meta视口标签
<meta name = "viewport" content = "width = device-width, user-scalable = no, initial-scale = , maximum-scale = , minimum-scale = ">
属性
解释说明
width
宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale
初始缩放比，大于0的数字
maximum-scale
最大缩放比，大于0的数字
minimum-scale
最小缩放