<meta name="screen-orientation" content="portrait">
<meta name="full-screen" content="yes">//开启全屏
<meta name="browsermode" content="application">
<meta name="x5-orientation" content="portrait">
<meta name="x5-fullscreen" content="true">
<meta name="x5-page-mode" content="app">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">

禁止多行文本框textarea拖拽

这样按下面添加属性多行文本框就不能拖拽放大缩小了:

textarea {
resize: none;
}

去除IE10+浏览器文本框后面的小叉叉

只需下面一句就ok了

input::-ms-clear {
display: none;
}

/* 禁用iPhone中Safari的字号自动调整 */
html { -webkit-text-size-adjust: none; }

-webkit-overflow-scrolling: touch;
苹果手机滑动卡顿解决方案

去除Chrome等浏览器文本框默认发光边框

input:focus, textarea:focus {
outline: none;
}

去掉高光样式:

input:focus{
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only;
}

当然这样以来,当文本框载入焦点时,所有浏览器下的文本框的边框都不会有颜色上及样式上的变化了,但我们可以重新根据自己的需要设置一下,如:

input:focus,textarea:focus {
outline: none;
border: 1px solid #f60;
}
这样的话,当文本框载入焦点时,边框颜色就会变为橙色,给用户一个反馈。

只要在样式里面加一句css去掉iPhone、iPad的默认按钮样式就可以了!~

input[type="button"], input[type="submit"], input[type="reset"] {

-webkit-appearance: none;

}

/*响应式媒体查询,*/

/*
* -----------------------------------------
* 320 ~ 480
* -----------------------------------------
*/
@media only screen and (min-width: 320px) and (max-width: 480px) {
}

/*
* -----------------------------------------
* 321 ~ 宽大于321的设备
* -----------------------------------------
*/
@media only screen and (min-width: 321px) {
}

/*
* -----------------------------------------
* ~ 320 宽小于320的设备
* -----------------------------------------
*/
@media only screen and (max-width: 320px) {
}

/*
* -----------------------------------------
* ~ 480 宽小于480的设备
* -----------------------------------------
*/
@media only screen and (max-width: 480px) {
}

/* medium screens (excludes iPad & iPhone) */
/*
* -----------------------------------------
* 481 ~ 767 宽大于480且小于767的iPad和iPhone
* -----------------------------------------
*/
@media only screen and (min-width: 481px) and (max-width: 767px) {
}

/* ipads (portrait and landscape) */
/*
* -----------------------------------------
* 768 ~ 1024 宽大于480且小于1024的iPad和iPhone
* -----------------------------------------
*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
}

/* ipads (landscape) */
/*
* -----------------------------------------
* 768 ~ 1024 宽大于480且小于1024的iPad和iPhone
* -----------------------------------------
*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
}

/* ipads (portrait) */
/*
* -----------------------------------------
* 768 ~ 1024 宽大于480且小于1024的iPad和iPhone
* -----------------------------------------
*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
}

/*
* -----------------------------------------
* 1444 ~ 1824 宽大于1444且小于1824的设备
* -----------------------------------------
*/
@media only screen and (min-width: 1444px) and (max-width: 1824px) {
}

/*
* -----------------------------------------
* 1824 ~ 宽大于1824的设备
* -----------------------------------------
*/
@media only screen and (min-width: 1824px) {
}

/*
* -----------------------------------------
* 2224 ~ 宽大于2224的设备
* -----------------------------------------
*/
@media only screen and (min-width: 2224px) {
}

/* iphone 4 and high pixel ratio (1.5+) devices */
/*
* -----------------------------------------
* iphone4 ~
* -----------------------------------------
*/
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
}/* iphone 4 and higher pixel ratio (2+) devices (retina) */

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

移动端常用的meta标签,媒体查询以及一些样式设置《转载收藏》的更多相关文章

  1. 常用HTML meta 标签属性(网站兼容与优化需要),meta标签

    常用HTML meta 标签属性(网站兼容与优化需要),meta标签 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索 ...

  2. META标签之关键词、网页描述设置帮助SEO网站优化(转)

      ASP.NET 4.0 Web Forms针对SEO改进措施中有一个是在Page类中加了2个新属性:MetaKeywords 和MetaDescription,它们使得在后台代码类中用编程的手法设 ...

  3. CSS3中媒体查询,更换样式表

    <link rel="stylesheet" href="css/1.css" media="(min- width:600px)"& ...

  4. 常用的Meta标签写法和作用

    页面关键词 <meta name="keywords" content="your tags" /> 页面描述 <meta name=&quo ...

  5. 移动端开发的meta标签作用

    一.<meta name="viewport" id="viewport" content="width=device-width, initi ...

  6. 常用的meta标签总结

    <!-- 关键字,搜所引擎 SEO --><meta http-equiv="keywords" content="关键字1,关键字2,..." ...

  7. 常用的meta标签

    <!-- 关键字,搜所引擎 SEO --> <meta http-equiv="keywords" content="关键字1,关键字2,...&quo ...

  8. 一些常用的meta标签

    <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...

  9. 一些常用的meta标签及其作用

    声明文档使用的字符编码  <meta charset='utf-8'>优先使用 IE 最新版本和 Chrome  <meta http-equiv="X-UA-Compat ...

随机推荐

  1. poj2635 同余定理 + 素数筛法

    题意:给定一个数,这个数是两个素数的乘积,并给定一个限制L,问是否两个素数中存在小于L的数,若存在输出较小质数,否则打印'GOOD'. 思路: 1 . x = a * b, a和b都是素数,那么x只能 ...

  2. spring boot admin + spring boot actuator + erueka 微服务监控

    关于spring boot actuator简单使用,请看 简单的spring boot actuator 使用,点击这里 spring boot admin 最新的正式版本是1.5.3 与 spri ...

  3. Oracle 11g数据库安装和卸载教程

    Oracle11g的安装教程 同时解压缩两个zip文件,生成一个database文件夹,进入到database文件夹,点击setup 去掉安全更新的选项,直接下一步 选择创建和配置数据库,点击下一步 ...

  4. Servlet中forward和redirect的区别(转)

    forward方式:request.getRequestDispatcher("/somePage.jsp").forwardrequest, response);     red ...

  5. Linux传统Huge Pages与Transparent Huge Pages再次学习总结

      Linux下的大页分为两种类型:标准大页(Huge Pages)和透明大页(Transparent Huge Pages).Huge Pages有时候也翻译成大页/标准大页/传统大页,它们都是Hu ...

  6. javascript 获取随机数

    javascript 获取随机数 var rand=Math.floor(Math.random()*(n+1)) floor 向下取整 random 获得0-1之间的随机数

  7. do while 循环和while循环的区别

    do while 循环和while循环的区别 1.do while循环是先执行循环体,然后判断循环条件,如果为真,则执行下一步循环,否则终止循环:    while循环是先判断循环条件,如果条件为真则 ...

  8. xml的xPath解析规则

    一,为什么要用xpath技术 问题:当使用dom4j查询比较深的层次结构的节点(标签,属性,文本),比较麻烦!!! 二,xpath的规则 2.1,/根元素的案例 /AAA 选择根元素AAA       ...

  9. MongoDB远程维护客户端工具的使用!

    MongoDB在互联网项目中使用越来越多,布署在云端Linux服务器上的mongoDB数据库,大多存在远程维护不便的问题,开放27017端口又将导致安全隐患.有个折中的办法就是使用基于web的客户端管 ...

  10. WPF自学入门(四)WPF路由事件之自定义路由事件

    在上一遍博文中写到了内置路由事件,其实除了内置的路由事件,我们也可以进行自定义路由事件.接下来我们一起来看一下WPF中的自定义路由事件怎么进行创建吧. 创建自定义路由事件分为3个步骤: 1.声明并注册 ...