1、 元素
meta 标签位于 head 标签之间，是 HTML 语言的一个辅助性标签，合理的设置在移动端中起着非常重要的作用。下面列举几个常用的用法：
// 强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览
// 禁止百度SiteApp转码声明
// 禁止自动识别电话和邮箱；
// 指定iphone中safari顶端的状态条的样式(default：白色；black：黑色；black-translucent ：半透明)；
// 添加到 IOS 主屏后的标题
// 隐藏地址栏，启用 WebApp 全屏模式
// 优先使用 IE 最新版本和 Chrome
// 注明作者
2、font-family 字体选择
body {font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi（中文名称叫黑体-简）。设计时候一般用华文黑体来代替，两者差异微小。
3、使用 rem 替代 em 单位
rem（root element，html）是 CSS3 新增的一个相对单位，相对于根目录的 em 而不是相对于父元素，也就是说，它虽然是相对值，但是只是相对于根目录来说的（也就是 html），它不会随着其它元素的改变而改变。通过它既可以做到只修改根元素就成比例的调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。从而可以有效的快速保持任何分辨率下保持视觉一致。
4、禁止选择
当你希望页面上的文字或者图片不被用户选择时候亦或者禁止长按保存图片时，可以使用这个方法来实现。是不是很方便的说，但注意的是不可滥用，否则会出现一些无法输入或者点击的情况。
a, img {
-webkit-touch-callout:none; /* 禁止长按链接与图片弹出菜单 */
}
html, body {
-webkit-user-select:none; /* 禁止选中文本（如无文本选中需求，此为必选项） */
user-select:none;
}5、html5重力感应事件
还记得满大街的摇一摇抽奖吗？大部分核心代码就是这个。
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler, false);
}
var speed = 30;//speed
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData) {
var acceleration =event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {
alert('别摇那么大力嘛...');
// your code here
}
lastX = x;
lastY = y;
lastZ = z;
}
收藏(0)
赞 
粤公网安备44010602001432号