移动web开发

一、 移动端基础

     1.1 浏览器现状（主要兼容主流浏览器，处理webkit内核浏览器即可）

             （1）PC端常见浏览器：360、谷歌、火狐、QQ、百度，UC、搜狗、IE

             （2）移动端常见浏览器：UC、QQ、欧朋、百度、360以及杂牌浏览器

     1.2 手机屏幕的现状（作为开发者无需关注这些分辨率，因为我们常用的尺寸单位为px）

               （1）Android设备有多重分辨率：480800、480854、540960、7201280、1080*1920、2k/4k（移动端设备屏幕尺寸非常多，碎片化严重）

               （2）近年来iphone的碎片化也加剧了，分辨率有640960、401136、7501334、12422208

      1.3 手机屏幕尺寸问题（主要了解物理像素比）

             

 

 

      1.4 移动端调试

              （1）Chrome DevTools(谷歌浏览器)的手机模拟调试

              （2）搭建本地web服务器，手机和服务器在同一局域网内，通过手机获取服务器访问页面

              （3）使用外网服务器，直接ip地址或者域名访问

 

二、视口

                简介：   视口（viewport)：就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口，视觉视口和理想视口。

              2.1 布局视口 （layout viewport）

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

                       （2）IOS,Android基本上都将这个视口的分辨率设置为980px，所以pc上的页面大多都能在手机呈现,只是元素看上去很小，一般默认可以通过手动缩放页面

                              

 

 

 

              2.2 视觉视口 （visual viewport）

                        （1）字面页面，它是用户正在看到的网站区域，注意：是网站区域

                        （2）我们可以通过缩放去操作视觉视口，但是不会影响布局视口，布局视口仍然保持原来的宽度

                              

 

 

 

              2.3 理想视口 （pidel viewport）

                         （1） 目的：为了使网站在移动端最有理想的浏览和阅读宽度而设定

                         （2）理想视口，对设备来说，是最理想的视口尺寸

                         （3）需要手动添加meta标签通知浏览器操作

                         （4）meta视口标签的目的：布局视口的宽度应该和理想视口的宽度一至，简单理解就是设备有多宽，我们的布局视口就有多宽

                                   总结:我们开发最终会用到理想视口，而理想视口就是将布局视口修改为视觉视口

                                     理想视口  =     ------------->     

 

              2.4 meta标签

                                      

                                        最标准的viewport设置                            视口宽度与设备宽度保持一致                                 视口的默认缩放比为1.0

                                        不允许用户自主缩放                               最大允许的缩放比例为1.0                                      最小允许的缩放比例为1.0

                                     

 

 

 

 

三、 二倍图

              3.1 物理像素&逻辑像素&物理像素比

                       物理像素：屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出场设置中就设置好了的，比如说苹果6是750 * 1334

                       css像素 ：又称为虚拟像素、设备独立像素或逻辑像素，也可以理解为直觉像素。css像素是web编程的概念，指的是css代码中使用的逻辑像素，比如iphone的逻辑像素为375 * 667px

                       物理像素比（屏幕像素比）：dpr=物理像素/逻辑像素

 

               3.2 Retina（视网膜屏幕）及二倍图

                        Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

                        对于一张50px*50px的图片，在手机Retina屏中进行打开，按照刚刚的物理像素比会方法倍数，将图片放大至模糊状态。（造成的问题）

                        在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题，通常使用二倍图。（解决方法）

                        通常使用二倍图，是因为市面绝大多数手机还是受着iPhone6/7/8的影响，但是现在也存在一些手机有3倍图或者4倍图的情况，在实际开发中以公司标准为主。

 

四、 移动开发选择和技术解决方案

           4.1 移动端主流方案

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

                       通常情况下，网址域名前面加 m(mobile) 可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。

                       也就是说，PC端 和移动端为两套网站，pc端是pc端的样式，移动端在写一套，专门针对移动端适配的一套网站。（共两套：pc 和  移动端）

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

                       响应式网站：即pc和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配；（共一套）

                       自适应网站：pc端及移动端有两套网站，根据屏幕的不同，显示不同的网站，例如：京东、小米。（共两套）

 

            4.2 移动端技术解决方案

                    1.移动端浏览器兼容问题

                          移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题。我们可以放心使用 H5 标签和 CSS3 样式。

                          同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可

                    2.移动端公共样式       （官网地址： https://necolas.github.io/normalize.css/）

                            移动端 CSS 初始化推荐使用 normalize.css     （ Normalize.css 是 CSS 重置的替代方案。）

                            作用：保护了有价值的默认值、修复了浏览器的bug、是模块化的、拥有详细的文档

 

           4.3 移动端大量使用 CSS3盒子模型box-sizing   （举例：https://www.jianshu.com/p/9bc8251d13cd）

 

             4.4 移动端特殊样式

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

五、 移动端常见布局

                     移动端单独制作

                              （1）流式布局（百分比布局，也称非固定像素布局） 京东

                              （2）flex 弹性布局 携程首页

　　　　　　         （3）less+rem+媒体查询布局

　　　　　　         （4）混合布局（根据以上三种自己视情况而定）

                     响应式

                             （1）媒体查询

                             （2）bootstarp

                      流式布局：

                                      流式布局，就是百分比布局，也称非固定像素布局。

                                     通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

                                     流式布局方式是移动web开发使用的比较常见的布局方式。