移动WEB前端开发资源整合

最新推荐文章于 2019-08-13 20:28:34 发布

weixin_30321449

最新推荐文章于 2019-08-13 20:28:34 发布

阅读量116

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/ns10086/p/5130511.html

本文深入探讨了HTML与CSS在优化网页与移动端用户体验方面的关键技巧，包括设置视口元标签以适配不同设备，禁用长按链接与图片弹出菜单，调整移动端字体显示，以及如何通过CSS实现文本截断与改善表单交互体验。同时介绍了如何通过-webkit-appearance属性改变元素的默认浏览器风格，并讨论了不同CSS属性在提高页面响应速度和减少内存消耗之间的权衡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

meta相关：

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>

CSS相关：

-webkit-overflow-scrolling:touch;快速滚动和回弹的效果，看上去和原生app的效率都有得一拼。-webkit-overflow-scrolling创建了带有硬件加速的系统级控件，所以效率很高。但是这相对是耗更多内存的，最好在产生了非常大面积的overflow时才应用。

　移动端字体

body {font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; /*使用无衬线字体*/}

　禁止长按链接与图片弹出菜单

a, img { -webkit-touch-callout: none; }

防止点击高亮，可以通过给a标签或者body,html加

-webkit-tap-highlight-color:transparent;

　-webkit-appearance属性，来改变任何元素的浏览器默认风格

appearance:none|normal|icon|window|button|menu|field;

去掉webkit默认的表单样式

button,input,optgroup,select,textarea {-webkit-appearance:none; }

禁止选中文本

-webkit-user-select: none;

　去掉a、input和button点击时的蓝色外边框和灰色半透明背景

a,button,input,optgroup,select,textarea {-webkit-tap-highlight-color:rgba(0,0,0,0); }

　修改input的planceholder样式

input::-webkit-input-placeholder {color:#ccc;}

　修改表单获取焦点时的样式

input[type=text]:focus, input[type=password]:focus { border: 2px solid#f00;outline: none;}

　用CSS实现省略号文字截断

white-space: nowrap;text-overflow: ellipsis;

转载于:https://www.cnblogs.com/ns10086/p/5130511.html