移动端技术解决方案

视口

概念：视口 就是浏览器显示页面内容的屏幕区域 分为布局视口 视觉视口 和理想视口；

布局视口 ：pc端页面直接在手机上显示

视觉视口： 用户能看到的区域 

理想视口：为了使网站在移动端有最理想的浏览和阅读宽度而设定的，需要手动添加meta标签，meta标签是为移动端而生的

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

initaial-scale 初始缩放比  maximum-scale 最大缩放比  user-scalable=no 不许用户自行缩放

二倍图

物理像素比： 1个px能显示的物理像素个数

retina技术可以把更多的物理像素点压缩到屏幕 即达到更高的分辨率

二倍图：为了解决在retina屏幕中图片模糊的问题

通常使用方法：

• 准备一个2倍大的图片，
• 插入背景图片后，将background-size改为1倍，
• 如果是雪碧图 也是缩小后再测量距离
• 切图建议使用cuttman

移动端浏览器

移动端公共样式

网址

    normalize.css 

移动端特殊样式

•  css3盒子模型  
•  box-sizing:border-box
• 点击高亮我们需要清除清除设置为transparent完成透明
•   * {-webkit-tap-highlight-color:transparent;}
  
• 在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式
•   input { -webkit-appearance: none; }
• 禁用长按页面时的弹出菜单
•   img,a {-webkit-touch-callout: none;}