关于移动Web开发的一些坑和技巧总结:
「H5」这个词汇虽然是不专业的,但在国内环境里最能让非技术人员
理解的叫法
通常移动端页面被俗称「H5」页面,,我们应该关心的是沟通效率和成本
因此下文所「H5」即移动终端设备上的WEB页面。
1. 关于PPI
PPI全称为Pixel Per Inch
,译为每英寸像素取值,更确切的说法应该是像素密度,也就是衡量单位物理面积内拥有像素值的情况。PPI中的pixel指的应该是物理像素。
显示器上的像素我们就称之为物理像素(physical pixel)或者设备像素(device pixel)。
CSS像素从来都只是一个相对值。在高PPI的设备上,CSS像素甚至在默认状态下就相当于多个物理像素的尺寸。
2. webkit内核中的一些私有的meta标签
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> |
3. CSS基础交互
设置全局的CSS样式,避免图中的长按弹出菜单与选中文本的行为
代码如下:
a, img { |
4. 去除 iOS Webview alert 弹窗网址的解决办法
window.alert = function(a) { |
来源:去除 iOS Webview alert 弹窗网址的解决办法
5.终端设备参数
移动端的页面与PC的Web页面相比简单了不少,但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备。不管你是前端攻城狮还是UI设计狮,看看下图你就会知道,这是多么痛苦的一件事情:
再来看看H5页面需要适配的终端设备品牌:
看到这些数据是不是感觉回到了IE6时代?想想当年适配IE6都弱爆了。
谷歌设计列出了市面上比较流行的设备参数,可以点击这里查阅,国内网络不能正常访问!