mobile
mobile copied to clipboard
imweb
library for mobile develop
rem自适应方案
# H5自适应改造方案——rem方案 ## 原理 之前我们H5页面使用的方案是设置viewport meta头，让浏览器帮我们把页面缩放，使得页面看起来好像是自适应。实际上这不是自适应，只是在中小屏设备上，看起来差距不大，问题不明显而已。 现在大屏高清设备流行，自适应的问题也越来越明显了。在大屏设备上，课程封面小，title被拉长，文字小，按钮扁等问题越来越突出，已经达到不能忍受的程度，因此需要一套自适应的方案。 ### 页面缩放 在viewport meta头里，取消让浏览器自动缩放页面，页面的自适应由页面自身管理。 因为有dpr的问题，为了统一管理，让浏览器帮我们根据dpr缩小页面，比如dpr=2，就缩小0.5让页面统一处在dpr=1的环境中。 ### rem rem是一个半相对单位，它相对的是html(或body)元素的font-size值，例如有html { font-size: 10px; }，则1rem = 10px。 当html元素的font-size是根据设备宽度自适应时，使用rem的页面也就会有自适应的特性。 ### 文字 根据以下两个原因，对于文字使用px： - 在大屏设备希望看到更多的文字 - 中文点阵最好是在12px，14px，16px这种尺寸，使用rem就会无法避免使用13px，15px尺寸，这样文字会显示的很奇怪 没有浏览器帮助我们缩放页面，在高清设备里面需要我们手动对文字进行缩放，为了方便这个而不需要写media...
Mobile开发经验沉淀
在手Q开发过程中，遇到各种问题，解决之后沉淀如下，细分为： 1、**经验沉淀**：开发过程怎么快速开发并在开发过程中可以兼顾到一些场景的出现 2、**疑难问题**：一些机型出现的疑难问题，如和解决，以及对应的机型等问题详细描述（截图）
-webkit-min-device-pixel-ratio的常见值对比（是设备上物理像素和设备独立像素，设备像素比率） **`来源参考网上，欢迎完善`**。测试地址：[https://bjango.com/articles/min-device-pixel-ratio/](https://bjango.com/articles/min-device-pixel-ratio/) | 设备 | 分辨率 | 设备像素比率 | | :-- | :-- | :-- | | Android LDPI | 320×240 | 0.75 | | Iphone 3 & Android MDPI...
#### 问题描述： 在用小米2，安卓版本4.01.07，qq5.9.1，zepto1.1.6测试页面的时候发现页面报JS错误。 #### 原因： 具体跟进发现zepto1.1.6里有这么一段 ``` javascript if (settings.headers) for (name in settings.headers) setHeader(name, settings.headers[name]) xhr.setRequestHeader = setHeader var async = 'async' in settings ? settings.async : true xhr.open(settings.type,...
### 概念 JPEG有两种存储格式：baseline 和 progressive。Baseline JPEG 会在数据可用时，`一行一行自上而下`显示。Progressive JPEG会`先显示模糊图片，然后逐渐清晰`。  ### 浏览器渲染 Progressive JPEG在所有浏览器都会显示，这里的关注点是如何渲染。  Chrome + Firefox + IE9 下 Progressive JPEG 加载很快。 ### 对比 ##### 用户体验 Progresssive JPEG...
ios弹出的虚拟键盘是浮在上面的，而安卓的虚拟键盘是压缩窗口大小，如f12，所以导致fixed在底部的东西在ios上和安卓上的不同差异。 测试地址为：http://output.jsbin.com/fecare/1/ 测试结果：安卓的fixed底部会随着虚拟键盘的弹出而提上去，因为窗口变小了，而ios的fixed底部会看不见，因为窗口大小并没有改变。
