移动端布局注意事项

移动端布局注意事项

手机屏的横向与纵向

/*手机横向*/
@media only screen and (orientation:landscape ) {
    /*css代码*/
}

/*手机纵向*/
@media only screen and (orientation:portrait ) {
	/*css代码*/
}

IOS中设置手机的桌面图标

<link rel="apple-touch-icon" href="img/kabao.png" />		

苹果浏览器启用全屏模式

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

苹果浏览器状态栏颜色设置

<meta name="apple-mobile-web-app-status-bar-style" content="red" />

网页中禁止识别手机号

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

部分安卓手机不需要这个设置，默认不会识别手机号

网页中禁止识别邮箱

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

说明：新机型已不用设置（ios8以下，安卓4.4以下）

网页中调起拔号键盘

<a href="tel:18627101111">点击拔打电话</a>

网页中调起邮件发送功能

<a href="mailto:love****i@163.com">点击给我发送邮件</a>

标签点击时取消高光效果

*{
    -webkit-tap-highlight-color: transparent;
}

IOS输入框首字母英文大写的问题

<input type="text" autocapitalize="off"  />

IOS覆盖默认的按钮样式问题

.btn{
    -webkit-appearance: none;
}

QQ浏览器特有标识

1. 启用全屏

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

2. 启用app应用模式

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

3. 强制竖屏

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

4. 强制横屏

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

UC浏览器特有标识

1. 启用全屏

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

2. 启用app应用模式

   <meta name="browsermode" content="application">
   

3. 强制竖屏

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

4. 强制横屏

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

禁止复制选中文本

* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}

IOS屏幕旋转时，字体大小调整的问题

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
  -webkit-text-size-adjust:100%;
}

禁用缓存

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

说明：手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。

禁用IOS文本输入框默认内阴影

*{
    -webkit-appearance: none;
}