11-视口

移动端设计视口

PPI(像素密度)

• PPI(Pixels Per Inch)表示的是每英寸所拥有的像素(Pixels)数目。

• PPI值越高，画面的细节就越丰富

PPI与DPI的区别

• “素”（P）PI:只存在于计算机显示领域

• “点”（D）PI:只出现于打印或印刷领域

PC端页面与移动端页的相互跳转

    var a=navigator.userAgent;
    if(     
        a.indexOf("Android")!=-1 ||     
        a.indexOf("iPhone")!=-1 ||  
            a.indexOf("iPad")!=-1 ){
            //跳转到手机网站
            location.href="../Mobile/index.html";
    }

前言

浏览器现状：PC端浏览器，移动端浏览器

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

• 总结：兼容移动端主浏览器，处理webkit内核浏览器即可

手机屏幕现状

• 移动端设备屏幕尺寸非常多，碎片化严重

• Android设备有多种分辨率：480x480,480x854,540x960,720x1280,1080x1920;

• 近年来iphone的碎片化也加剧了其设备的主要分辨率有：640x960,640x1136,750x1334,1242x1136等

• 作为开发者不需要关注这些分辨率，因为我们使用的尺寸单位是像素（px)

移动端调试方法

• chrome devTools（谷歌浏览器）的模拟手机调试

• 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器 ​ 1.确保手机和电脑是同一个wifi ​ 2.打开网页要用服务器形式，Live Server 插件 ​ 3.Win+R ：输入CMD 打开命令行窗口 ​ 4.输入：ipconfig查询自己的IPv4 ​ 5.将自己的IP复制下来，替换掉网页上默认的127.0.0.1 ​ 6.打开草料二维码官网，将替换之后的完整网页地址复制进去生产二维码 ​ 7.扫它

• 使用外网服务器，直接域名或者ip访问。

一、视口（viewport)

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

布局视口（layout viewport）

• 针对移动端而言

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

• ios和andriod基本都将这个视口分辨率设置为980px,所以PC上的网页大部分都能在手机上呈现，只不过元素看上去很小，一般可通过手动缩放。

• 为了正常显示所有的页面，包括pc端，所以移动端针对浏览器页面有个默认的页面宽度。大多数的手机浏览器页面默认宽度为980px，有的是1024px。我们称默认的移动端浏览器页面展示模式为布局视口(layout viewport),下图列出了一些设备上默认宽度

视觉视口（visual viewport）

• 字面量意思：就是用户正在看到的网站的区域，注是网站的区域。

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

• 布局视口是为了正常显示pc端页面而做 的调整，但对于屏幕本身是无法以屏幕本身宽度来作为页面布局。而视觉视口是指以当前屏幕的宽度作为页面的布局方式。 不同的dpi会导致相同px的页面在不同的手机下会有空隙或者滚动条等。

理想视口（ideal viewport)

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

• 理想视口，对设备来讲，是最理想的尺寸，需要手动添加meta视口标签通过浏览器操作

• meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致。（设备多宽我们的布局的视口就有多宽）

• 无论是什么品牌手机，或哪种分辨率，应当同样宽度的页面在不同的手机上都会呈现一样的效果。

    <meta  name="viewport"  content="width=device-width,user-scalable=no,inital-scale=1.0,maximum=1.0,minimum=1.0">
​
//user-scalable:用户是否可以缩放（yes或no)/（1或0）
//initial-scale:初始缩放比，大于0的数字

总结

1. 布局视口：一般移动端都会有一个默认的布局视口，用于解决pc端在手机显示的问题。（为了正常显示PC端页面而做的调整）

2. 视觉视口：以屏幕的宽度来作为页面布局

3. 理想视口：同样的页面在不同屏幕宽度的手机呈现一样的效果，可以自适应终端设备宽度

//视口标签
<meta  name="viewport"  content="width=device-width,user-scalable=no,inital-scale=1.0,maximum=1.0,minimum=1.0">

二倍图

物理像素/物理像素比/像素

• 物理像素点指的视屏幕显示的最小颗粒，是物理真实存在的，厂商出厂设置好的

• 我们开发的时候1px不一定等于1个物理量

• PC端，一个物理像素等一1px

• 移动端，两个物理像素等于1px；(iphone8)

多背图

• 对于一张50px*50px的图片，在手机屏打开，按照刚才的无礼像素比会放大倍数，这样会造成图片模糊

• 在标准的viewport设置中，使用多倍图来提高图片质量，解决在高清设备中的模糊问题

• 通常使用二倍图，因为iphone6/7/8的影响，但是现在还存在3倍，4倍等

• 背景图片注意缩放问题，例如psd图片是10px,在手机端中是5px

  案例

  • 我们现在需要一张50px * 50px的图片，直接放到iphone8里面会放大两倍，变成100px*100px,图片会模糊

  • 我们采用的解决方法是：放一张100 * 100的图片，然后手动的把这个图片缩小为50px*50px

背景缩放

• 背景缩放：background-sizing:背景图片宽度 背景图片高度；

• background-sizing:属性只规定背景图像的尺寸，只写一个参数表示宽度，高度等比例缩放，也可以使用百分比，相对于盒子而言

• 简单而言，就是图片会放大变模糊，为了避免这种情况，在开发中我们使用两倍图，然后把尺寸缩小一杯，这样的话，图片放到手机端放大之后相当于没有放大，从而不至于出现模糊的现象。

二倍精灵图的做法：

• 在firework里面把精灵图等比例缩放为原来的一半，之后根据大小测量坐标

• 注意代码里面background-sizing也要写：精灵图原来宽度的一半