移动开发基础

注意

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

1、视口

视口就是浏览器显示页面内容的屏幕区域

视口分为布局视口、视觉视口、理想视口
移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽
想要理想视口，我们需要给我们额移动页面添加<meta>标签

标准的viewport参数设置

视口宽度和设备保持一致
视口默认缩放比例为0
不允许用户自行缩放
最大允许缩放比例为1.0
最小允许缩放比例为1.0

2、物理像素和物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理存在的，厂商在出厂就设置好的
开发过程中，1px不一定等于一个物理像素
PC页面，1个px等于一个物理像素，但移动端不尽相同
一个px的能显示的物理像素点的个数称为物理像素比或者屏幕像素比

3、多倍图

对于一张50px*50px的图片，在手机上视网膜屏打开的时候，会按照物理像素比放大，从而造成图片模糊
在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题，
通常使用二倍图，因为iphone6\7\8的影响，现在还存在3倍图4倍图，具体看公司需求。
背景图也要使用多倍图

4、移动端开发选择

现在市场常见的移动端开发有单独制作移动端页面和响应式页面
现在主流选择是：单独制作移动端页面

5、常见问题解决方案

1、浏览器兼容问题

移动端浏览器基本都是以webkit内核为主，因此我们只需考虑webkit兼容问题，可以放心使用H5标签和css3样式。同事我们浏览器的私有前缀我们只需要考虑添加-webkit-即可

2、CSS初始化normalize.css

移动端css初始化推荐使用normalize.css。是一个可以定制的CSS文件，他让不同的浏览器在渲染网页元素的时候形式更加统一，是一种现代的，为HTML5准备的优质替代方案

优点

保护了有价值的默认值
修复了浏览器的bug，解决了浏览器不一致的默认样式
模块化，提供了易用性
有很详细的文档

3、CSS3盒子模型box-sizing

传统模式宽度计算：盒子宽=width+border+padding（外扩）

CSS3盒子宽度计算：盒子宽=width（内减）

如何选择？

移动端可以全部css3盒子模型
PC端如果完全需要兼容，就用传统模式，如果不考虑兼容问题，则选择使用CSS3盒子模型。

4、特殊样式

/*
* css3盒子模型
*/
box-sizing:border-box;
-webkit-box-sizing:border-box;

/*禁止长按页面时弹出菜单*/
img,a{
    
    
  -webkit-touch-callout:none
}

/*在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance:none;

/*点击高亮我们需要清除，设置为transparent完成透明*/
-webkit-tap-highlight-color:transparent;

大前端基础~移动开发基础