Web笔记之移动端开发

1、移动端基础

        ①浏览器现状
                说明：国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。
                总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。
        ②手机屏幕现状
                ● 移动端设备屏幕尺寸非常多，碎片化严重。
                ● Android设备有多种分辨率∶480x800,480x854,540x960,720x1280,1080x1920等，还有传说中的2K，4k屏。
                ● 近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960,640x1136 等
                ● 作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是px。
        ③常见移动端屏幕尺寸
                数据可以参考：https://material.io/devices/
                注∶作为前端开发，不建议大家去纠结dp , dpi , pt, ppi等单位。
        ④移动端调试方法
                ● Chrome DevTools (谷歌浏览器）的模拟手机调试
                ● 搭建本地web服务器，手机和服务器在同一个局域网内，通过手机访问服务器
                ● 使用外网服务器，直接IP或域名访问
        总结：
                ● 移动端浏览器主要是对webkit内核进行兼容
                ● 现在开发的移动端主要针对手机端开发
                ● 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一
                ● 学会用谷歌浏览器模拟手机界面以及调试

2、视口

        说明：视口(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=1.0,maximum-scale=1.0,minimum-scale=1.0">
                ● 属性说明：
                        width → 宽度设置的是viewport宽度，可以设置device-width特殊值
                        initial-scale → 初始缩放比，大于0的数字
                        maximum-scale → 最大缩放比，大于0的数字
                        minimum-scale → 最小缩放比，大于0的数字
                        user-scalable → 用户是否可以缩放，yes(1)或no(0)
        ⑤标准的viewport设置
                ● 视口宽度和设备保持一致
                ● 视口的默认缩放比例1.0
                ● 不允许用户自行缩放
                ● 最大允许的缩放比例1.0
                ● 最小允许的缩放比例1.0
        总结：
                ● 视口就是浏览器显示页面内容的屏幕区域
                ● 视口分为布局视口、视觉视口和理想视口
                ● 移动端布局想要的理想视口就是手机屏幕有多宽，我们的布局视口就有多宽
                ● 想要理想视口，需要给移动端页面添加meta视口标签

3、二倍图

        ①物理像素与物理像素比
                ● 物理像素也称分辨率
                ● 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8是750*1334
                ● 开发时候的1px不一定等于1个物理像素
                ● 在PC端页面，1px等于1个物理像素，但是移动端就不一定
                ● 1px能显示的物理像素点的个数，称为物理像素比或屏幕像素比
        ②多倍图
                ● 对于一张50px*50px的图片,在手机Retina屏中打开，按照物理像素比会放大倍数，这样会造成图片模糊
                ● 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
                ● 因为iPhone6\7\8的影响，开发中通常使用二倍图，但也存在3倍图4倍图的情况，这个看公司需求
                ● 背景图片注意缩放问题
        ③二倍图之插入图片
                原理：图片在移动端被放大倍数之后的像素与原图像素一致
                目的：解决图片在移动端被放大倍数之后造成的图片模糊
                目标：比如想在移动端插入一张50px*50px的图片
                步骤：
                        ● 先在PC端准备一张比移动端原图大的图片，比如100px*100px的图片
                        ● 然后手动的在CSS样式把图片的宽高改为准备图片的一半，也就是50px*50px
        ④二倍图之背景图片
                原理：图片在移动端被放大倍数之后的像素与原图像素一致
                目的：解决图片在移动端被放大倍数之后造成的图片模糊
                目标：比如想在移动端放置一张50px*50px的背景图片
                方法：
                        用到的css样式：background-size：背景图片宽度  背景图片高度;
                        说明：
                                ● background-size 属性规定背景图像的尺寸
                                ● 单位：px，百分比，cover，contain
                                ● cover：把背景图片扩展至足够大，以使其完全覆盖背景区域。
                                ● contain：把背景图片扩展至最大尺寸，以使其宽度和高度完全适应内容区域
                步骤：
                        ● 先在PC端准备一张比移动端原图大的图片，比如100px*100px的图片
                        ● 其次把盒子的宽高设为50px
                        ● 再者利用 background 放置背景图片
                        ● 最后添加 background-size: 100% 100%;
                        注意：
                                background-size 样式必须放在url的后面，因为有了背景图片才能做缩放
        ⑤多倍图切图之cutterman工具
                可以在PS中利用 cutterman工具快速的切出一倍图，二倍图，三倍图
                @3X 是3倍图
                @2X 是2倍图
                @1X 是1倍图 (原图)
        ⑥二倍精灵图做法
                ● 在firework里面把精灵图等比例缩放为原来的一半
                ● 之后根据大小测量坐标
                ● 注意代码里面background-size也要写:精灵图原来宽度的一半 auto;

4、移动端开发选择

        移动端主流方案
                ①单独移动端页面 (主流)
                        说明：
                                ● 这个是单独写的页面，和PC端是分开
                                ● 通常情况下，网址域名前面加m(mobile)可以打开移动端，比如m.taobao.com
                                ● 通过判断设备，如果是移动设备打开，则跳到移动端页面。
                ②响应式兼容PC、移动端 (其次)
                        说明：
                                ● 这个是只写一个页面，PC端、移动端共用
                                ● 通过判断屏幕宽度来改变样式，以适应不同终端。
                                ● 三星就是这样制作的，三星电子官网: www.samsung.com/cn/
                        优点：制作的页面效果很精美
                        缺点：制作麻烦，需要花很大精力去处理兼容性问题
                总结：
                        ● 现在市场常见的移动端开发有单独制作移动端页面和响应式页面两种方案
                        ● 现在市场主流的选择还是单独制作移动端页面

5、移动端技术解决方案

        一、移动端浏览器
                ● 移动端浏览器基本以webkit内核为主，因此只考虑webkit兼容性问题。
                ● 可以放心使用H5标签和CSS3样式。
                ● 同时浏览器的私有前缀只需要考虑添加-webkit-即可
        二、CSS初始化页面
                移动端开发不建议自己写CSS初始化页面样式，推荐使用 normalize.css
                下载地址：http://necolas.github.io/normalize.css/
                normalize.css 的优点：
                        ● 保护了有价值的默认值
                        ● 修复了浏览器的bug
                        ● 是模块化的
                        ● 拥有详细的文档
        三、特殊样式
                ①CSS3盒子模型
                        box-sizing: border-box;
                        -webkit-box-sizing: border-box;
                ②点击高亮需要清除
                        -webkit-tap-highlight-color: transparent;
                ③在ios上加上这个属性才能给按钮和输入框自定义样式
                        -webkit-appearance : none;
                ④禁止长按页面时弹出菜单
                        img,a { -webkit-touch-callout: none; }