移动端问题汇总帖

博客和实战中总结出来的问题目录，更具体的内容参见参考来源。

1. fixed定位问题：
   Android：表现较好，魅族MX2自带浏览器可能表现异常。
   iOS：fixed+input+软键盘打开表现异常，iOS7 beta3修复。可使用iScroll插件。
   参考：

   • 移动端web页面使用position:fixed问题总结 问题描述和图片
   • Web移动端Fixed布局的解决方案 一个解决思路：fixed元素写在main中，main固定为小于一屏的高度。（就是用main代替body，整屏禁止滚动，absolute定位）

2. flex
   仅在低版本android见过flex失效问题。1. 可以使用float、table解决。2. 使用兼容性的版本。
   参考：

   • 2017年如何在移动端优雅的使用flex 推荐了postcss。
   • 在线加前缀：Autoprefixer CSS online

3. viewport
   习惯了不动脑子的<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">，就会遇上1px border的问题。
   上面这句傻瓜代码实际说了啥？说的是等比放大。将一张网页生生比做一张图片，然后按dpr放大。当然，最小尺寸1px就会生生被拉成2px。
   明白原理之后，我们可不可以换一种思维：把网页做成2倍图，然后1:1放入移动端屏幕中。<meta name="viewport" content="width=device-width*2, initial-scale=0.5, maximum-scale=0.5, user-scalable=0">
   你可能还需要window.devicePixelRatio查看当前屏幕的dpr值。
   参考：

   • 移动前端开发之viewport的深入理解
   • 移动web屏幕适配方案
   • 移动web开发之像素和DPR

4. localStorage

• Android中webview的localStorage功能默认关闭，需要使用代码开启。

  //允许JavaScript执行
  webView.getSettings().setJavaScriptEnabled(true);
        
  // 开启DOM缓存，开启LocalStorage存储（html5的本地存储方式）
  webView.getSettings().setDomStorageEnabled(true);
  webView.getSettings().setDatabaseEnabled(true);
  webView.getSettings().setDatabasePath(MainActivity.this.getApplicationContext().getCacheDir().getAbsolutePath());

• iOS的，目前没查到相关问题，暂且认为与W3C标准一致，会一直保存在客户端上。