meta基础知识

  1. H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />　
  2. 忽略将页面中的数字识别为电话号码 
    <meta name="format-detection" content="telephone=no" />
  3. 忽略Android平台中对邮箱地址的识别 
    <meta name="format-detection" content="email=no" />
  4. 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari 
    <meta name="apple-mobile-web-app-capable" content="yes" />
    
<!-- ios7.0版本以后，safari上已看不到效果 -->
  5. 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    
<!-- 可选default、black、black-translucent -->
  6. 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>
  7. 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>

常见问题

  1. 部分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;

}
  1. winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉

    <meta name="msapplication-tap-highlight" content="no">
  2. webkit表单元素的默认外观怎么重置 
    .css{-webkit-appearance:none;}
  3. webkit表单输入框placeholder的颜色值能改变么 
    input::-webkit-input-placeholder{color:#AAAAAA;}
    
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
  4. 禁用 radio 和 checkbox 默认样式 
    input[type=radio]::-ms-check,
    
input[type=checkbox]::-ms-check
    
{
    
display: none;
    
}
  5. 禁用PC端表单输入框默认清除按钮 
    input[type=text]::-ms-clear,
    
input[type=tel]::-ms-clear,
    
input[type=number]::-ms-clear
    
{
    
display: none;
    
}
  6. 禁止ios和android用户选中文字 
    .css{-webkit-user-select:none}
  7. 打电话发短信实现 
    <a href="tel:0755-10086">打电话给:0755-10086</a>
    <a href="sms:10086">发短信给: 10086</a>
  8. 写邮件实现 
    <a href="mailto:peun@foxmail.com">peun@foxmail.com</a>
  9. 屏幕旋转的事件和样式 
    事件
    
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{}
    
}
  10. audio元素和video元素在ios和andriod中无法自动播放 
    $('html').one('touchstart',function(){
    
audio.play()
    
})
  11. ios使用-webkit-text-size-adjust禁止调整字体大小 
    body{-webkit-text-size-adjust: 100%!important;}
  12. 取消input在ios下，输入的时候英文首字母的默认大写 
    <input autocapitalize="off" autocorrect="off" />
  13. android 上去掉语音输入按钮 
    input::-webkit-input-speech-button {display: none}
  14. 播放视频不全屏 
    <!--
    
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资源整合的更多相关文章

  1. 【超级干货】手机移动端WEB资源整合

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  2. 手机移动端WEB资源整合

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  3. 【超级干货】手机移动端WEB资源整合：转载

    转载于:http://www.w3cfuns.com/notes/24611/fbba9cbd616e795360ea45515494aa53.html meta基础知识 H5页面窗口自动调整到设备宽 ...

  4. web前端-《手机移动端WEB资源整合》——meta标签篇

    前端网页meta元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词.meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向 ...

  5. 手机H5移动端WEB资源整合之meta标签

    一.相关网站使用meta的实例 youku首页的Meta设置: <meta charset="utf-8"> <meta http-equiv="X-U ...

  6. 【原】移动web资源整理(安卓、ios移动端兼容性问题归整)

     meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wi ...

  7. WebJars——web端静态资源的jar包

    1.WebJars介绍 Web前端使用了越来越多的JS或CSS,如jQuery,Backbone.js和Bootstrap.一般情况下,我们是将这些Web资源拷贝到Java Web项目的webapp相 ...

  8. 移动端web开发 尽量哪些标签 常用标签及注意事项

    H5手机移动端WEB开发资源整合 常用的标签及注意事项: https://blog.csdn.net/u012118993/article/details/56023399 移动前端不得不了解的htm ...

  9. 移动端 Web 开发前端知识整理

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

随机推荐

  1. freemarker字符串拼接

    freemarker字符串拼接 1.字符串拼接的几种类型 (1)字符串和字符串 (2)字符串和数字 (3)字符串和字符串变量 (4)字符串变量和字符串变量 2.演示示例 <#--定义字符串--& ...

  2. 一：学习Linux前准备工作

    1:虚拟机,网站上有很多种类的虚拟机,找一款适合自己用的.我这里使用的是 Virtual Box 下载地址:https://www.virtualbox.org/ 安装虚拟机 一路 Next 就可以. ...

  3. ASP.NET VS2013 Office 转 PDF

    本文适用于VS2013 项目中的Word转换为PDF.Excel转换为PDF.PPT转换为PDF 0.一种更加简单方便的方法 1.本页所用的方法在本机测试时基本不会出现问题,只是偶尔PPT转PDF失败 ...

  4. java中垃圾回收机制和引用类型

    在java中JDK1.2版本以后,对象的引用类型分为四种,从高到低依次为:强引用.软引用.弱引用.虚引用. ①强引用的特点:垃圾回收机制绝不会回收它,即使内存不足时,JVM宁愿抛出OutOfMemor ...

  5. 【BZOJ4372】烁烁的游戏（动态点分治）

    [BZOJ4372]烁烁的游戏(动态点分治) 题面 BZOJ 大意: 每次在一棵书上进行操作 1.将离某个点u的距离不超过d的点的权值加上w 2.询问单点权值 题解 这题和前面那一道震波几乎是一模一样 ...

  6. Hadoop 安装流程

    前言:因项目中需要数据分析,因而使用hadoop集群通过离线的方式分析数据 参考着网上的分享的文章实施整合的一篇文章,实施记录 安装流程: 1.设置各个机器建的ssh 无密码登陆 2.安装JDK 3. ...

  7. sspanel 添加远程节点问题汇总

    链接数据库错误: InternalError: (1130, u"Host '97.64.40.100' is not allowed to connect to this MySQL se ...

  8. 【经验随笔】MYSQL表加锁升级导致数据库访问失败

    背景:有一次定位问题发现,在同一个session连接中对MYSQL部分表加锁,导致其它未加锁的表不能访问. 用Spring管理MYSQL数据连接,在多线程访问数据库的情况下容易出问题.一个线程中对部分 ...

  9. mysql测试

    数据库效率测试: 1.创建索引: 数据量小(或者空表)的情况下创建索引: 有一定数据量情况下(100000条数据)创建索引: 在有一定数据量的情况下,数据库会为现有数据添加索引,此时,创建索引的工作量 ...

  10. 读书笔记-浅析Java运行时数据区

    作为一个 Java 为主语言的程序员,我偶尔也需要 用 C/C++ 写程序,在使用时让我很烦恼的一件事情就是需要对 new 出来的对象进行 delete/free 操作,我老是担心忘了这件事情,从而导 ...