1、防止手机中网页放大和缩小,这点是最基本的,最为手机网站开发者来说应该都知道的,就是设置meta中的viewport 还有就是,有些手机网站我们看到如下声明: <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> 设置了DTD的方式是XHTML的写法,假如我们页面运用的是html5,可以不用设置DTD,直接声明<!DOCTYPE html>。 使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。 <metaname="viewport"content="user-scalable=0"/> 但是为了更好的兼容,我们会使用完整的viewport设置。 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> 当然,user-scalable=0,有的人也写成user-scalable=no,都可以的。 2、apple-mobile-web-app-capable apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。 语法:<meta name="apple-mobile-web-app-capable"content="yes"> 说明:如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。 3、format-detection format-detection 启动或禁用自动识别页面中的电话号码。 语法:<meta name="format-detection"content="telephone=no"> 说明:默认情况下,设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。 4、html5调用安卓或者ios的拨号功能 html5提供了自动调用拨号的标签,只要在a标签的href中添加tel:就可以了。 如下:ahref="tel:4008106999,1034">400-810-6999 转 1034</a> 拨打手机直接如下 <a href="tel:15677776767">点击拨打15677776767</a> 5、禁止复制、选中文本 * { -webkit-user-select:none; -moz-user-select:none; -khtml-user-select:none; user-select:none; } 6、长时间按住页面出现闪退 * { -webkit-touch-callout:none; } 7、iphone及ipad下输入框默认内阴影 input{ -webkit-appearance:none; } 8、ios和android下触摸元素时出现半透明灰色遮罩 a { -webkit-tap-highlight-color:rgba(255,255,255,0) } 设置alpha值为0就可以去除半透明灰色遮罩,备注:transparent的属性值在android下无效。 9、圆角bug 某些Android手机圆角失效 background-clip: padding-box; 10、设置缓存 <metahttp-equiv="Cache-Control"content="no-cache"/> 手机页面通常在第一次加载后会进行缓存,然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。 11、移动端点击300ms延迟 300ms尚可接受,不过因为300ms产生的问题,我们必须要解决。300ms导致用户体验并不是很好,解决这个问题,我们一般在移动端用tap事件来取代click事件。 $("#haorooms").on("touchend",function(event) { event.preventDefault(); }); 12、移动端 HTML5 audio autoplay 失效问题 这个不是 BUG,由于自动播放网页中的音频或视频,会给用户带来一些困扰或者不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放,必须由用户来触发才可以播放。 解决方法思路:先通过用户 touchstart 触碰,触发播放并暂停(音频开始加载,后面用 JS 再操作就没问题了)。 解决代码: document.addEventListener('touchstart',function() { document.getElementsByTagName('audio')[0].play(); document.getElementsByTagName('audio')[0].pause(); }); 13、JS判断微信浏览器 function isWeixin(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=='micromessenger'){ return true; }else{ return false; } } 14、JS判断设备 function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsMidp = sUserAgent.match(/midp/i) == "midp"; var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; var bIsAndroid = sUserAgent.match(/android/i) == "android"; var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; document.writeln("您的浏览设备为:"); if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) { document.writeln("phone"); } else { document.writeln("pc"); } } browserRedirect(); 15、微信浏览器用户调整字体大小后页面矬了,怎么阻止用户调整 //以下代码可使Android机页面不再受用户字体缩放强制改变大小,但是会有1S左右延时,期间可以考虑loading来处理 if (typeof(WeixinJSBridge) == "undefined") { document.addEventListener("WeixinJSBridgeReady", function (e) { setTimeout(function(){ WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){ alert(JSON.stringify(res)); }) }, 0) }); }else{ setTimeout(function(){ WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){ alert(JSON.stringify(res)); }) }, 0) } //IOS下可使用 -webkit-text-size-adjust禁止用户调整字体大小 body { -webkit-text-size-adjust:100%!important; } 16、屏幕旋转的事件和样式 //JS处理 function orientInit(){ var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait'; if(orientChk =='lapdscape'){ //这里是横屏下需要执行的事件 }else{ //这里是竖屏下需要执行的事件 } } orientInit(); window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){ setTimeout(orientInit, 100); },false) //CSS处理 //竖屏时样式 @media all and (orientation:portrait){ } //横屏时样式 @media all and (orientation:landscape){ } 17、CSS样式 // 禁止长按链接与图片弹出菜单 a,img { -webkit-touch-callout: none } // 禁止ios和android用户选中文字 html,body {-webkit-user-select:none; user-select: none; } // 改变输入框placeholder的颜色值 ::-webkit-input-placeholder { /* WebKit browsers */ color: #999; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; } input:focus::-webkit-input-placeholder{ color:#999; } 18、空白页基本meta标签 <!-- 设置缩放 --> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> <!-- 可隐藏地址栏,仅针对IOS的Safari(注:IOS7.0版本以后,safari上已看不到效果) --> <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 仅针对IOS的Safari顶端状态条的样式(可选default/black/black-translucent ) --> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 --> <meta name="format-detection"content="telephone=no, email=no" />