移动端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:peun@foxmail.com">peun@foxmail.com</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资源整合的更多相关文章
- 【超级干货】手机移动端WEB资源整合
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...
- 手机移动端WEB资源整合
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...
- 【超级干货】手机移动端WEB资源整合:转载
转载于:http://www.w3cfuns.com/notes/24611/fbba9cbd616e795360ea45515494aa53.html meta基础知识 H5页面窗口自动调整到设备宽 ...
- web前端-《手机移动端WEB资源整合》——meta标签篇
前端网页meta元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词.meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向 ...
- 手机H5移动端WEB资源整合之meta标签
一.相关网站使用meta的实例 youku首页的Meta设置: <meta charset="utf-8"> <meta http-equiv="X-U ...
- 【原】移动web资源整理(安卓、ios移动端兼容性问题归整)
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wi ...
- WebJars——web端静态资源的jar包
1.WebJars介绍 Web前端使用了越来越多的JS或CSS,如jQuery,Backbone.js和Bootstrap.一般情况下,我们是将这些Web资源拷贝到Java Web项目的webapp相 ...
- 移动端web开发 尽量哪些标签 常用标签及注意事项
H5手机移动端WEB开发资源整合 常用的标签及注意事项: https://blog.csdn.net/u012118993/article/details/56023399 移动前端不得不了解的htm ...
- 移动端 Web 开发前端知识整理
文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...
随机推荐
- E: 未发现软件包 install_flash_player_11_linux.x86_64.tar.gz
1 错误描述 youhaidong@youhaidong:~$ sudo apt-get install install_flash_player_11_linux.x86_64.tar.gz 正在读 ...
- .Net+SQL Server企业应用性能优化笔记—精确查找瓶颈
首先我们需要部署一个测试环境,将Web项目的源代码拷到测试环境Web服务器IIS上,使得可以直接通过IE访问我们的网站.SQL Server环境可以部署在同一台机器上,条件允许的话有专门的数据库测试服 ...
- 学习笔记:Vue+Node+Mongodb构建简单商城系统(一)
所需前置知识: HTML.CSS.JS.Vue.ES6.Npm.Webpack.Node.Express.Mongodb 项目整体架构: IDE:webstorm: 项目建立过程(cmd常用命令行指令 ...
- Django学习-6-路由系统
1.url(r'^index/', views.index), 函数处理 url(r'^home/', views.Home.as_view()), 类方法处理 ...
- mini设计模式
创建型 单例模式 饿汉式 public class Singleton () { private static Singleton instance = new Singleton(); privat ...
- python拓扑排序
发现自己并没有真的理解拓扑排序和多重继承,再次学习了下 拓扑排序要满足如下两个条件 每个顶点出现且只出现一次. 若A在序列中排在B的前面,则在图中不存在从B到A的路径. 拓扑排序算法 任何无回路的顶点 ...
- 创建元素节点createElement
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- ssm整合快速入门程序(二)
下面我们配置serivce层到项目中 1.service包中创建ItemsService.java接口,和service.imp包中创建一个service实现类ItemsServiceImpl.jav ...
- Splay入门解析【保证让你看不懂(滑稽)】
BST真是神奇的东西... 而且种类好多呀... 我这个蒟蒻只学会了splay orzCJ老爷,各种树都会 好好好,不说了,直接说splay. 不知道splay是啥,,你也要知道平衡树是啥... 平衡 ...
- 【HAOI2015】树上操作(树链剖分)
题面 Description 有一棵点数为N的树,以点1为根,且树点有边权.然后有M个操作,分为三种: 操作1:把某个节点x的点权增加a. 操作2:把某个节点x为根的子树中所有点的点权都增加a. 操作 ...