移动端总结

1、常用的meta标签

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="format-detection" content="telephone=no">

<meta http-equiv="Cache-Control" content="no-cache" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />


<meta name="x5-fullscreen" content="true">

<meta name="x5-orientation" content="portrait">

<meta name="x5-orientation" content="landscape">

<meta name="x5-page-mode" content="app">


<meta name="full-screen" content="yes">

<meta name="screen-orientation" content="portrait">

<meta name="screen-orientation" content="landscape">

<meta name="browsermode" content="application">
2、IOS的H5页面滚动不流畅解决方案
在滚动层的外面的class添加-webkit-overflow-scrolling : touch;
3.去触摸元素时出现半透明灰色遮罩
-webkit-tap-highlight-color:rgba(255,255,255,0)
4、IOS 默认输入框内阴影重置
{ border: 0; -webkit-appearance: none; }
5、旋转屏幕时,字体大小调整的问题
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:100%;}
6、改变placeholder的样式
input::-webkit-input-placeholder{color:#000;}
input:focus::-webkit-input-placeholder{color:#000;}
textarea::-webkit-input-placeholder {text-align:left}
7、禁止选中
E { -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;}
8、IOS禁止保存或拷贝图像
img { -webkit-touch-callout: none; }
9、密码
input[type=text]{ -webkit-text-security: disc; }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转自H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 (部分安卓手机的UC浏览器写完以后还是可以放大缩小)忽略将...
    clfeng阅读 756评论 2 2
  • H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 (部分安卓手机的UC浏览器写完以后还是可以放大缩小) 忽略将页...
    阿根廷斗牛阅读 3,655评论 0 0
  • 文章网址:http://blog.csdn.net/hardgirls/article/details/51722...
    程序员小布的养生之道阅读 904评论 0 52
  • 本想写点什么,缓解一下压力。晚上画了一张小画,画画是件美妙的事情。近来压力过大,生完宝宝身体差了很多。应该一切随缘...
    叶子祁阅读 257评论 0 0
  • 小城昨夜雨霖铃,千珠万珠碎琉璃。 寒霜缠枝更声重,秋凉飞渡冬日临。
    墨月霜花阅读 305评论 2 4