module4-01-移动开发基础

移动开发基础

一、了解移动基础

1.1 移动web开发基础

1.1.1 浏览器现状

• 国内得UC和QQ, 百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发得内核，就像国内得手机操作系统都是基于ANDROID修改开发得一样

• 兼容移动端主流浏览器，处理Webkit内核浏览器即可

1.1.2 手机屏幕现状

• 屏幕尺寸非常多，碎片化严重

• 前端开发不用关心分辨率，常用尺寸单位是px

1.1.3 常见移动端屏幕尺寸

• 一些单位: dp，dpi，pt，ppi

1.1.4 总结

• 移动端浏览器我们主要对webkit内核进行兼容

• 现在的移动端开发主要正对手机端进行开发

• 移动端碎片化比较严重, 分辨率和屏幕尺寸大小不一

• 学会用谷歌浏览器模拟手机页面进行调试(F12)

二、视口

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

2.1 布局视口

• 一般移动设备的浏览器都默认设置了一个布局视口,用于结局早期的PC端页面在手机上显示的问题。

• IOS，Android基本都会将这个视口分辨率设为980px，所以PC上的网页大多都能在手机商城县，只不过元素看上去很小，需要通过手动缩放页面

• 仅仅视觉效果被压缩, 但是实际没有压缩

2.2 视觉视口

• 字面意思，它是用户正在看到的网站的区域

• 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口扔保持原来的宽度

2.3 理想视口

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

• 手动添加<meta>标签使布局视口的宽度理想视口(布局视口)一致,简单理解就是设备有多宽, 布局的视口就有多宽

2.3.1 <meta>视口标签

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

属性	解释说明
width	宽度设置是viewport宽度, 可以设置device-width特殊值
initial-scale	初始缩放比, 大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字
user-scalable	用户视口可以缩放，yes或no（1或0）

2.3.2 总结

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

• 视口分为布局视口，视觉视口和理想视口

• 移动端布局想要的是理想视口，就是手机有多宽，布局视口就有多宽

• 想要理想视口，需要添加meta属性

三、物理像素和物理像素比

• 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了，比如苹果6/7/8 是 750*1334

  • 而实际占满总宽只需要375个像素

• 我们开发的1px不一定是一个物理像素

• PC端页面，1个px等于一个物理像素，移动端不一定相等

• 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比

• Retina(视网膜屏幕)是一种显示技术, 可以将更多的物理像素点压缩至一块屏幕里, 从而得到更高的分辨率, 并提高屏幕显示的细腻程度

四、二倍图

4.1 多倍图

• 对于一张50px*50px的图片在Retina屏打开，按照如iphone6/7/8那样的物理像素比会放大2倍，使照片模糊

• 在标准的viewport中，通常使用多倍图来解决在高清设备中的模糊问题

• 通常使用二倍图，甚至存在三、四倍图的情况

4.2 调整方法

• 假设图片都是100px的两倍图

（1）插入图片

{
     50px;
    height: 50px;
}

（2）背景图片

{
    background-size: 50px 50px;
}

4.3 要图

（1）启动图

• 是设计师根据手机分辨率开发的

• 需要在这里也切图

（2）开发尺寸

• 是实际写进代码里面，进行切图量尺寸用的

（3）多倍图切图

• @3X 3倍图

• @2X 2倍图

• @1X 1倍图原图

4.4 移动开发选择

（1）单独制作移动端页面（主流）

• 哦判断设备，跳转到移动端页面，域名有m.

（2）响应式页面兼容移动端

• 三星手机官网

• 优点:

  • 自适应, 公用一套网站

• 缺点:

  • 制造麻烦, 需要花费精力去调兼容性问题

4.5 移动端常见问题的解决方法

• 回顾PC端的reset.css清除默认样式

• 但对于移动端使用normalize.css设置同意默认样式更好

（1）CSS初始化 normalize.css

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

• 优点

  • 保护有价值的默认值

  • 修复了浏览器的bug，结局了浏览器的不一致的默认样式

  • 模块化的, 提高了易用性

• 官网地址: http://necolas.github.io/normalize.css/

（2）CSS3 盒子模型 box-sizing

• 移动端推荐使用border-box

（3）特殊样式

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

4.6 移动端技术选型

（1）单独制作移动端页面（主流）

• 流式布局（百分比布局）

• flex弹性布局（强烈推荐）

• less+rem+媒体查询布局

• 混合布局

（2）响应式页面兼容移动端

• 媒体查询

• bootstrap