移动端兼容

1.分辨率

1.1.像素

定义：像素即一个小方块，它具有特定的位置和颜色。图片、电子屏幕（手机、电脑）就是由无数个具有特定颜色和特定位置的小方块拼接而成。像素可以作为图片或电子屏幕的最小组成单位。

px、rem、em、vh、vw、%的区别

px

px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。
em

参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
rem

css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。
%

一般宽泛的讲是相对于父元素，但是并不是十分准确。 1、对于普通定位元素就是我们理解的父元素 2、对于position: absolute;的元素是相对于已定位的父元素 3、对于position: fixed;的元素是相对于 ViewPort（可视窗口）
vw

css3新单位，viewport width的缩写，视窗宽度，1vw等于视窗宽度的1%。举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
vh

css3新单位，viewport height的缩写，视窗高度，1vh等于视窗高度的1%。举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。
vm

css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm 举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度， 1 vm = 900px/100 = 9 px。

1.2屏幕分辨率

定义：屏幕分辨率指一个屏幕具体由多少个像素点组成。

iphone 6 ：1334x750像素

iphone xs max： 2688 X 1242,分辨率高不代表屏幕就清晰，屏幕清晰程度还与尺寸有关。

1.3图像分辨率

同一尺寸的图片，分辨率越高，表示在垂直和水平方向的像素点越多。

1.4PPI

定义：每英寸包括的像素数
使用PPI描述图片时，PPI越高，图片质量越高，使用PPI描述屏幕时，PPI越高，屏幕越清晰。
PPI计算

$PPI计算$

1.5DPI

DPI: 每英寸包括的点数
常用于打印机

2设备独立像素

2.1设备像素比

device pixel ratio 简称 dpr
如何获取dpr

在web中，采用window.devicePixelRatio，window下获取到的值为1。

在css中，采用min-device-pixel-ratio区别，可以为1,2,3做适配 @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){ }

3布局

布局视口

定义：布局视口layout viewport :布局视口是网页布局的基准窗口，在PC浏览器上，布局视口就等于当前浏览器的窗口大小（不包括borders 、margins、滚动条）

获取方式document.documentElement.clientWidth / clientHeight
视觉视口

获取方式window.innerWidth / innerHeight
meat viewport

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
浏览器大小

window.innerHeight：获取浏览器视觉视口高度（包括垂直滚动条）。

window.outerHeight：获取浏览器窗口外部的高度。表示整个浏览器窗口的高度，包括侧边栏、窗口镶边和调正窗口大小的边框。

window.screen.Height：获取获屏幕取理想视口高度，这个数值是固定的，设备的分辨率/设备像素比 window.screen.availHeight：浏览器窗口可用的高度。

document.documentElement.clientHeight：获取浏览器布局视口高度，包括内边距，但不包括垂直滚动条、边框和外边距。 document.documentElement.offsetHeight：包括内边距、滚动条、边框和外边距。

document.documentElement.scrollHeight：在不使用滚动条的情况下适合视口中的所有内容所需的最小宽度。测量方式与clientHeight相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条。

常见问题

1px问题

基于media查询判断不同的设备像素比给定不同的border-image

   .border_1px{
      border-bottom: 1px solid #000;
    }
    @media only screen and (-webkit-min-device-pixel-ratio:2){
        .border_1px{
            border-bottom: none;
            border-width: 0 0 1px 0;
            border-image: url(../img/1pxline.png) 0 0 2 0 stretch;
        }
    }

检查横竖屏问题

js获取横竖屏

window.addEventListener("resize", ()=>{
if (window.orientation === 180 || window.orientation === 0) { 
   正常方向或屏幕旋转180度
    console.log('竖屏');
};
if (window.orientation === 90 || window.orientation === -90 ){ 
    屏幕顺时钟旋转90度或屏幕逆时针旋转90度
    console.log('横屏');
}  
});

css获取横竖屏

@media screen and (orientation: portrait) {
  /*竖屏...*/
  } 
  @media screen and (orientation: landscape) {
    /*横屏...*/
 }

图片模糊问题

   .avatar {
      background-image: -webkit-image-set( "conardLi_1x.png" 1x, "conardLi_2x.png" 2x );
   }

   <img src="conardLi_1x.png"
     srcset=" conardLi_2x.png 2x, conardLi_3x.png 3x">

   const dpr = window.devicePixelRatio;

   const images =  document.querySelectorAll('img');

   images.forEach((img)=>{
     img.src.replace(".", `@${dpr}x.`);
  })

横向阻尼感

overflow-x: scroll;
-webkit-overflow-scrolling: touch

ios问题

1、input标签，设置type=button属性，disabled设置true，会出现样式文字和背景异常问题

解决方案：使用opacity=1

2、有时对非可点击元素如(label,span）添加单机监听事件，不会触发

解决方案：修改样式，cursor:pointer

3、使用webview时，页面滚动卡顿

解决方案：对webview设置更低的“减速率”

self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;

4、换行转搜索
```
 <form action="javascript:return true">
   <input  ref="inputDom" type="search"  placeholder="搜索" v-model="searchValue" 
   @keypress="keypress" />
 </form>
```

kd-cloud-web / Blog

移动端兼容 #37