移动端 h5开发遇到的问题总结

最新推荐文章于 2024-05-06 09:14:40 发布

lily2016n

最新推荐文章于 2024-05-06 09:14:40 发布

阅读量1.6k

点赞数 1

分类专栏： css3 文章标签： h5

本文链接：https://blog.csdn.net/lily2016n/article/details/78472196

版权

12 篇文章 0 订阅

订阅专栏

1、去掉 a，input 在移动端浏览器中的默认样式
①禁止 a 标签背景
在移动端使用 a标签做按钮的时候，点按会出现一个“暗色”的背景，去掉该背景的方法如下

a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
}

②禁止长按 a，img 标签长按出现菜单栏
使用 a标签的时候，移动端长按会出现一个菜单栏，这个时候禁止呼出菜单栏的方法如下：

a, img {
    -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
}

③流畅滚动

body{
    -webkit-overflow-scrolling:touch;
}

2、CSS 超过一定宽度省略号…显示

{
    /*指定字符串的宽度*/
    width:300px;   
    overflow: hidden;  
    /* 当字符串超过规定长度，显示省略符*/ 
    text-overflow:ellipsis;  
    white-space: nowrap;   
}

3、去除 button在 ios上的默认样式

-webkit-appearance: none;
border-radius: 0

4、placeholder元素样式的修改

input::-webkit-input-placeholder{color:red;} //input框提示的颜色
input:focus::-webkit-input-placeholder{color:green;} //聚焦时的提示的颜色

5、禁止用户选中文字

-webkit-user-select:none

6、input框消除自动记忆功能

<input type="text" autocomplete="off">
//input的autocomplete属性默认是on：其含义代表是否让浏览器自动记录之前输入的值
//off：则关闭记录

7、h5页面禁止缩放

<head>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
</head>

持续更新中….

关注

专栏目录