十多年前web叩响了互联网时代的大门，十年后的今天，移动互联网的战幕率先由原生应用(Native app)拉开，移动web应用则后来居上。二者之间做何取舍，成为了广大产品决策者、开发者和学习者们争执不下的问题。
html语言是整个Web的基石，是一种标记的语言。对于html本身而言，其实并没有任何可以显示的东西，他只是承载了抽象意义上的一段信息，这段信息如何显示，由谁显示对html本身来说并不重要。而解读html的具体客体，通常被称为用户代理(UserAgent),即我们所说的浏览器。
html5为日益丰富的信息提供更简单更强大的描述能力，是html的升级版，使html文档所承载的信息更容易被所有人访问，更像是为移动设备而生的技术。
web开发在过去有非常多的局限，尤其是安全和设备访问相关的部分。相比于传统的桌面web开发，基于html5可以方便地构建类似传统客户端软件的网页App，可以访问磁盘系统和摄像头等敏感设备，轻松将桌面软件擅长的领域带入web的世界。对于当前的主流移动设备而言，定位、触摸和传感器是其重要特点，而html5在这些方面也有鼎力的支持。
一下总结出一些html5在移动端浏览器可能遇到的问题，供参考。
1.
iOS Safari 委托在document的事件失效
Safari 对click事件定义只能冒泡到body下面的子节点，所以委托在document上得click事件不会被触发！
解决方法为body得子节点添加click事件既可以解决。
$("body").children().click(function () {});
2.
iOS Safari 双击后事件失效bug
bug 出现在弹出层双击空白区域后，浏览器scroll下移一部分，页面点击事件失效。
解决方法：弹出层禁止touchstart；
3.
Android手机$(window).width() Bug
部门安卓手机通过Zepto.js提供得 $(window).width(); $(window).height()获取浏览器视图宽度与实际宽度不一致。
解决方法：通过document.documentElement.clientWidth 获取宽度。
var pageWidth = document.documentElement.clientWidth;
var pageHeight = document.documentElement.clientHeight;
4.
关闭iOS键盘首字母自动大写
在iOS中，默认情况下键盘是开启首字母大写的功能的，如果启用这个功能，可以这样：
5.
手机拍照和上传图片
ios 有拍照、录像、选取本地图片功能
部分android只有选取本地图片功能
6.
webview中viewport固定宽度全屏显示方法
由于一些移动端游戏或互动形式 布局（元素）需要固定大小，又需要自适应屏幕，
可以通过设置视口宽度等于固定值让浏览器自动缩放页面的方法来实现
其中的width=640就是网页内容区的宽度，需要在不同手机上刚好全屏显示，target-densitydpi=device-dpi设置后，css中的1px就会等于物理像素中的1px。
补充：由于safari浏览器不支持 target-densitydpi = device-dpi，所以加入JS代码自动调整缩放比例，调整后的代码：
if(screen.width < 640) {
document.getElementById('WebViewport').setAttribute('content', 'width=640,initial-scale=' + screen.width / 640 + ',target-densitydpi=device-dpi,minimum-scale=0.1,maximum-scale=1,user-scalable=no');
}
6.1
Meta基础知识：
H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
//一、HTML页面结构
// width 设置viewport宽度，为一个正整数，或字符串‘device-width’
// height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
// initial-scale 默认缩放比例，为一个数字，可以带小数
// minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数
// maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数
// user-scalable 是否允许手动缩放
//二、JS动态判断
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)){
var version = parseFloat(RegExp.$1);
if(version>2.3){
document.write('');
}else{
document.write('');
}
} else {
document.write('');
}
6.2
6.3
其他meta标签
7.关于Rentina
Rentina显示屏原理及设计方案
说明：retina屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个。
在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍。
那么，前端的应对方案是：设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2
//例如图片宽高为：200px*200px，那么写法如下
.css{width:100px;height:100px;background-size:100px 100px;}
//其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px
.css{font-size:20px}
//image-set设计Rentina背景图
image-set,webkit私有属性，也是CSS4的属性，为解决Rentina屏幕下的图像而生。
.css {
background: url(images/bg.jpg) no-repeat center;
background: -webkit-image-set(
url(images/bg.jpg) 1x, //支持image-set普通屏
url(images/bg-2x.jpg) 2x); //支持image-set的Rentinan
}
移动端字体单位font-size选择px还是rem
// 如需适配多种移动设备，建议使用rem。以下为参考值：
html { font-size: 62.5%; } //10*16 = 62.5%
//设置12px字体 这里注意在rem前要加上对应的px值，解决不支持rem的浏览器的兼容问题，做到优雅降级
body { font-size:12px; font-size:1.2rem; }
其他问题:
jQuery ajax在微信内置浏览器中，初始配置before、behind不好用.
网友评论