H5 移动端

1. 聊一聊1px边框问题?
   当设置meta标签viewport的content=“width=device-width”，这里就是把html视窗宽度大小设置等于设备宽度的大小 750px设计图里的1px边框在375px手机设备上要以0.5px来呈现才符合预期效果(即设备像素/物理像素) css里最低只支持1px大小，不足1px就以1px显示，导致边框太粗的效果 解决方法：1、border-image 图片 实现 2、使用background-image实现 3、多背景渐变实现 4、使用box-shadow模拟边框 5、viewport+rem实现（最佳实现） 该方法是使用 viewport+rem+js 来实现的，可以直接设置1px就行了，而且圆角什么的都没问题。

5link

```code
<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">  
<script> 
    var viewport = document.querySelector("meta[name=viewport]"); 
    //下面是根据设备像素设置viewport 
    if (window.devicePixelRatio == 1) { 
        viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no'); 
    } 
    if (window.devicePixelRatio == 2) { 
        viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no'); 
    } 
    if (window.devicePixelRatio == 3) { 
        viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no'); 
    } 
    var docEl = document.documentElement; 
    var fontsize = 10 * (docEl.clientWidth / 320) + 'px'; 
    docEl.style.fontSize = fontsize; 
</script> 
```

2. 聊聊你理解的rem？link
   像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。rem是CSS3新增的一个相对单位（root em，根em）。

3. 聊聊手机端屏幕自适应-淘宝网适配方案 ？taobao

6. ios端微信h5页面上下滑动时卡顿、页面缺失?
   问题：在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况。问题原因：微信浏览器的内核，Android上面是使用自带的WebKit内核，iOS里面由于苹果的原因，使用了自带的Safari内核，Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。解决办法：在公共样式加上如下代码

  {
    -webkit-overflow-scrolling:touch;
  }

7. 做转盘的实现思路link

8. 固定定位布局 键盘挡住输入框内容？link
   1)通过绑定窗口改变事件,监听键盘的弹出。然后去改变固定定位元素的位置。默认键盘的宽度应该是页面的2分之一。所以我们位移的距离改成键盘的二分之一就可以. 2)通过定时器实时监听是否触发input。如果触发input框 就把固定定位，改变成静态定位。这样就会浏览器会总动把内容顶上去。

     function fixedWatch(el) {
         //activeElement 获取焦点元素
         if(document.activeElement.nodeName == 'INPUT') {
             el.css('position', 'static');
         } else {
             el.css('position', 'fixed');
         }
     }
   
     setInterval(function() {
         fixedWatch($('.mian'));
     }, 500);
   

9. 移动端横屏怎么处理？link
   先检测现在是横屏还是竖屏，再进行计算rem

10. 安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100100，背景图必须得200200，然后background-size:contain;，这样显示出来的图片就比较清晰了。

  background:url(../images/icon/all.png) no-repeat center center;
  -webkit-background-size:50px 50px;
  background-size: 50px 50px;display:inline-block; width:100%; height:50px;
  // 或者指定 background-size:contain;

11. 图片加载 若您遇到图片加载很慢的问题，对这种情况，手机开发一般用canvas方法加载：具体的canvas API 参见：http://javascript.ruanyifeng.com/htmlapi/canvas.htm

12. apple-mobile-web-app-capable

//删除默认的苹果工具栏和菜单栏。
  <meta content="no" name="apple-mobile-web-app-capable">

apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。

如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

13. html5调用安卓或者ios的拨号功能

html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。

14. 上下拉动滚动条时卡顿、慢

body {
  -webkit-overflow-scrolling:
  touch;overflow-scrolling: touch;
}

12. 其余问题 link