手机端页面Html设置

最新推荐文章于 2023-09-15 08:56:25 发布

菜鸟进阶成大神

最新推荐文章于 2023-09-15 08:56:25 发布

阅读量4k

点赞数 1

分类专栏：前端开发

前端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先，这篇文章转自https://blog.csdn.net/qq_38881495/article/details/83513246，特声明一下版权，感谢！

1、在写手机端时必要需要加入meta
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
// （width=device-width），
// 初始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
// minimum-scale=1, maximum-scale=1 最大（最小）缩放比例
// user-scalable 是否允许用户缩放。

2.删除默认的苹果工具栏和菜单栏
<meta name="apple-mobile-web-app-capable" content="yes">

3.在web app应用下状态条（屏幕顶部条）的颜色
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

4.禁止了把数字转化为拨号链接
<meta name="format-detection" content="telephone=no">

5.浏览网站时的小图标

6.设置缓存
<meta http-equiv="Cache-Control"content="no-cache"/>
//手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。

7.长时间按住页面出现闪退
element {

-webkit-touch-callout:none;

}

8.select{
    -webkit-appearance: none;
    /*清除select默认样式*/
    background: url("img/order_img/drop-down.png")no-repeat right;
    /*注：上一步清除样式后，select中的三角符号也会被清除，所以需要自己添加下三角，我在此出用一个下三角背景图片填充*/
    background-size: 0.3rem;
    background-position-x: 96%;
}

9. format-detection 启动或禁用自动识别页面中的电话号码。
<meta name="format-detection"content="telephone=no">

10、上下拉动滚动条时卡顿、慢
body {-webkit-overflow-scrolling: touch; overflow-scrolling: touch;}

11、禁止复制、选中文本
Element {-webkit-user-select:none;
  -moz-user-select:none;
  -khtml-user-select:none;
   user-select:none;
}

12、iphone及ipad下输入框默认内阴影
Element{
-webkit-appearance:none;
}

13、ios和android下触摸元素时出现半透明灰色遮罩
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}

14、圆角bug
某些Android手机圆角失效
background-clip: padding-box;

15、顶部状态栏背景色
<meta name="apple-mobile-web-app-status-bar-style"content="black"/>

16、启动画面
<link rel="apple-touch-startup-image"href="start.png"/>
iOS下页面启动加载时显示的画面图片，避免加载时的白屏。

17、windows phone 点击无高光
<meta name="msapplication-tap-highlight"content="no">

18、ios 设置input 按钮样式会被默认样式覆盖
解决方式如下：
input,
textarea {
border: 0;
-webkit-appearance: none;
}

设置默认样式为none

19、IOS键盘字母输入，默认首字母大写
解决方案，设置如下属性
<input type="text"autocapitalize="off"/>

20、select 下拉选择设置右对齐
设置如下：
select option {
direction: rtl;
}

21、消除 IE10 里面的那个叉号
input:-ms-clear{display:none;}

22、处理点击延迟300s
$("#haorooms").on("touchend",function(event) {
event.preventDefault();
});

23、ios滑动手机卡顿
body{ -webkit-overflow-scrolling:touch; overflow-scrolling:touch;} //上下拉动滚动条时卡顿、慢
-webkit-overflow-scrolling:touch;/*流畅滚动,ios7下会有滑一下滑不动的情况，所以需要写上*/
html,body{ -webkit-tap-highlight-color: rgba(0,0,0,0); } // 去掉苹果手机点击瞬间出现的灰色背景
input{ -webkit-appearance: none; } // 去除苹果手机默认的input样式
selector{ cursor: pointer } // 给IOS系统里cursor不为pointer的元素添加事件时会不同程度受影响，加上cursor: pointer可解决
img{ pointer-events: none; } // 阻止图片在微信里被点击放大

24、viewport模板
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">//主要I是强制让文档的宽度与设备宽度保持1:1，最大宽度1.0，禁止屏幕缩放。
<meta content="yes" name="apple-mobile-web-app-capable">//这个也是iphone私有标签，允许全屏浏览。
<meta content="black" name="apple-mobile-web-app-status-bar-style">//iphone的私有标签，iphone顶端状态条的样式。
<meta content="telephone=no" name="format-detection">//禁止数字自动识别为电话号码，这个比较有用，因为一串数字在iphone上会显示成蓝色，样式加成别的颜色也是不生效的。
<meta content="email=no" name="format-detection">
---------------------
作者：&星期八&
来源：CSDN
原文：https://blog.csdn.net/qq_38881495/article/details/83513246
版权声明：本文为博主原创文章，转载请附上博文链接！