移动端开发常用代码

• 文章 - Web前端
• 2016-12-26 21:10
• 475

最近在玩移动端页面，记录一下常用的一些代码，免得以后总是翻自己的破笔记本，纸都翻出毛边了。应该不会很全面，慢慢积累吧！

meta标签的相关设置

页面视口宽度等于设备宽度，并且禁止用户缩放视口。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

QQX5内核浏览器强制竖屏显示。
<meta name="x5-orientation" content="portrait"/>

QQX5内核浏览器强制横屏显示。
<meta name="x5-orientation" content="landscape"/>

QQX5内核浏览器全屏显示。
<meta name="x5-fullscreen" content="true"/>

UC浏览器强制竖屏显示。
<meta name="screen-orientation" content="portrait"/>

UC浏览器强制横屏显示。
<meta name="screen-orientation" content="landscape"/>

UC浏览器全屏显示。
<meta name="full-screen" content="yes"/>

在360浏览器中，指定浏览器渲染内核为webkit内核。
<meta name="renderer" content="webkit"/>

在360浏览器中，指定浏览器渲染内核为ie兼容内核。
<meta name="renderer" content="ie-comp"/>

在360浏览器中，指定浏览器渲染内核为ie标准内核。
<meta name="renderer" content="ie-stand"/>

禁止页面中数字识别为电话号码和邮箱。
<meta name="format-detection" content="telephone=no,email=no"/>

移动端点击去阴影

元素在点击阴影去除。
-webkit-tap-highlight-color:rgba(0,0,0,0);

圆角清除

移动端下表单及按钮圆角清除。
-webkit-appearance:none;border-radius:0;

文字的相关设置

设置默认字体。
font-family:Helvetica;

禁止用户设置字体大小。
-webkit-text-size-adjust:100%;

禁止选中文字。
-webkit-user-select:none;

禁止文字换行。
white-space:nowrap;

超出部分隐藏。
overflow:hidden;

使用省略号来表示隐藏的文本。
text-overflow:ellipsis;