移动端Web资源整合
Posted tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端Web资源整合相关的知识，希望对你有一定的参考价值。
meta基础知识
- H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
- 忽略将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />
- 忽略android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />
- 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- ios7.0版本以后，safari上已看不到效果 -->
- 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可选default、black、black-translucent -->
- viewport模板——通用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>标题</title> <link rel="stylesheet" href="index.css"> </head> <body> 这里开始内容 </body> </html>
- viewport模板 – target-densitydpi=device-dpi，android 2.3.5以下版本不支持
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"><!-- width取值与页面定义的宽度一致 --> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>标题</title> <link rel="stylesheet" href="index.css"> </head> <body> 这里开始内容 </body> </html>
常见问题
- 部分android系统中元素被点击时产生的边框怎么去掉
android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only;
}
- winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉
<meta name="msapplication-tap-highlight" content="no">
- webkit表单元素的默认外观怎么重置
.css{-webkit-appearance:none;} - webkit表单输入框placeholder的颜色值能改变么
input::-webkit-input-placeholder{color:#AAAAAA;} input:focus::-webkit-input-placeholder{color:#EEEEEE;} - 禁用 radio 和 checkbox 默认样式
input[type=radio]::-ms-check, input[type=checkbox]::-ms-check { display: none; } - 禁用PC端表单输入框默认清除按钮
input[type=text]::-ms-clear, input[type=tel]::-ms-clear, input[type=number]::-ms-clear { display: none; } - 禁止ios和android用户选中文字
.css{-webkit-user-select:none} - 打电话发短信实现
<a href="tel:0755-10086">打电话给:0755-10086</a>
<a href="sms:10086">发短信给: 10086</a> - 写邮件实现
<a href="mailto:[email protected]">[email protected]</a>
- 屏幕旋转的事件和样式
事件 window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式； 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{} } - audio元素和video元素在ios和andriod中无法自动播放
$(‘html‘).one(‘touchstart‘,function(){ audio.play() }) - ios使用-webkit-text-size-adjust禁止调整字体大小
body{-webkit-text-size-adjust: 100%!important;} - 取消input在ios下，输入的时候英文首字母的默认大写
<input autocapitalize="off" autocorrect="off" />
- android 上去掉语音输入按钮
input::-webkit-input-speech-button {display: none} - 播放视频不全屏
<!-- 1.ios7+支持自动播放 2.支持Airplay的设备（如：音箱、Apple TV)播放 x-webkit-airplay="true" 3.播放视频不全屏 webkit-playsinline="true" --> <video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>
以上是关于移动端Web资源整合的主要内容，如果未能解决你的问题，请参考以下文章