手机移动端WEB资源
name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 2、
name="format-detection" content="telephone=no" /> 3、
name="format-detection" content="email=no" /> 4、
name="apple-mobile-web-app-status-bar-style" content="black" />
5、
name="apple-mobile-web-app-status-bar-style" content="black" />
6、
charset="utf-8"> content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> content="yes" name="apple-mobile-web-app-capable"> content="black" name="apple-mobile-web-app-status-bar-style"> content="telephone=no" name="format-detection"> content="email=no" name="format-detection">7、标题 rel="stylesheet" href="index.css"> 这里开始内容
charset="utf-8"> name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"> content="yes" name="apple-mobile-web-app-capable"> content="black" name="apple-mobile-web-app-status-bar-style"> content="telephone=no" name="format-detection"> content="email=no" name="format-detection">8、标题 rel="stylesheet" href="index.css"> 这里开始内容
/* 移动端定义字体的代码 */ body{font-family:Helvetica;}9、移动端字体单位font-size选择px还是rem对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备
html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}} @media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}} @media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}} @media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}} @media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}} @media screen and (min-width:800px){html{font-size:25px}}10、
.css{width:100px;height:100px;background-size:100px 100px;}
.css{font-size:20px}12、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉 ios用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置-webkit-tap-highlight-color的alpha值为0,也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}13、
a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0;) -webkit-user-modify:read-write-plaintext-only; }14、-webkit-user-modify有个副作用,就是输入法不再能够输入多个字符 另外,有些机型去除不了,如小米2 对于按钮类还有个办法,不使用a或者input标签,直接用div标签
name="msapplication-tap-highlight" content="no"> 15、
.css{-webkit-appearance:none;}16、
input::-webkit-input-placeholder{color:#AAAAAA;} input:focus::-webkit-input-placeholder{color:#EEEEEE;}17、webkit表单输入框placeholder的文字能换行么ios可以,android不行~在textarea标签下都可以换行~IE10(winphone8)表单元素默认外观如何重置
select::-ms-expand { display: none; }18、
input[type=radio]::-ms-check, input[type=checkbox]::-ms-check { display: none; }19、
input[type=text]::-ms-clear, input[type=tel]::-ms-clear, input[type=number]::-ms-clear { display: none; }20、
.css{-webkit-touch-callout: none}21、
.css{-webkit-user-select:none}
href="tel:0755-10086">打电话给:0755-10086
href="sms:10086">发短信给: 10086
href="mailto:peun@foxmail.com">peun@foxmail.com 22、
charset="utf-8"> content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> content="yes" name="apple-mobile-web-app-capable"> content="black" name="apple-mobile-web-app-status-bar-style"> content="telephone=no" name="format-detection"> content="email=no" name="format-detection"> class="btn-blue">按钮23、兼容性ios5+、部分android 4+、winphone 8要做到全兼容的办法,可通过绑定ontouchstart和ontouchend来控制按钮的类名
charset="utf-8"> content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> content="yes" name="apple-mobile-web-app-capable"> content="black" name="apple-mobile-web-app-status-bar-style"> content="telephone=no" name="format-detection"> content="email=no" name="format-detection"> class="btn-blue">按钮24、
window.onorientationchange = function(){ switch(window.orientation){ case -90: case 90: alert("横屏:" + window.orientation); case 0: case 180: alert("竖屏:" + window.orientation); break; } }
//竖屏时使用的样式 @media all and (orientation:portrait) { .css{} }//横屏时使用的样式 @media all and (orientation:landscape) { .css{} }25、
$('html').one('touchstart',function(){ audio.play() })
HTML5 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。
的accept 属性
type=file accept="image/*"> type=file accept="video/*">
部分android只有选取本地图片功能
winphone不支持
input控件默认外观丑陋
微信浏览器用户调整字体大小后页面矬了,怎么阻止用户调整
原因
ios侧是修改了body.style.webkitTextSizeAdjust值
解决方案:
/** * 页面加入这段代码可使Android机器页面不再受到用户字体缩放强制改变大小 * 但是会有一个1秒左右的延迟,期间可以考虑通过loading展示 * 仅供参考 */ (function(){ 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); } })();27、
body{-webkit-text-size-adjust: 100%!important;}
消除transition闪屏
网络都是这么写的,但我并没有测试出来
.css{ /*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/ -webkit-transform-style: preserve-3d; /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/ -webkit-backface-visibility: hidden; }28、
.css { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
autocapitalize="off" autocorrect="off" /> 30、
input::-webkit-input-speech-button {display: none}31、
winphone下默认触摸事件事件使用e.preventDefault是无效的
html{-ms-touch-action: none;}/* 禁止winphone默认触摸事件 */
34、
flex布局目前可使用在移动中,并非所有的语法都全兼容,但以下写法笔者实践过,效果良好~
/* ============================================================ flex:定义布局为盒模型 flex-v:盒模型垂直布局 flex-1:子元素占据剩余的空间 flex-align-center:子元素垂直居中 flex-pack-center:子元素水平居中 flex-pack-justify:子元素两端对齐 兼容性:ios 4+、android 2.3+、winphone8+ ============================================================ */ .flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;} .flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;} .flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;} .flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;} .flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;} .flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
charset="utf-8"> content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> content="yes" name="apple-mobile-web-app-capable"> content="black" name="apple-mobile-web-app-status-bar-style"> content="telephone=no" name="format-detection"> content="email=no" name="format-detection">