移动WEB前端开发资源的一些素材

最新推荐文章于 2025-12-25 19:30:23 发布

转载最新推荐文章于 2025-12-25 19:30:23 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/web-Knowledge/p/7060811.html

文章标签：

#前端 #人工智能 #移动开发 #ViewUI

本文详细介绍了如何使用meta标签进行移动端Web页面的适配，包括禁止浏览器自动识别手机号和Email，以及如何通过CSS去除默认表单样式、点击高亮效果和修改placeholder颜色等优化方法。

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"/>
<!--telephone=no 是禁止浏览器自动识别手机号码，email=no 是禁止浏览器自动识别Email-->

css篇：

<style>
    button,input,optgroup,select,textarea {
　　　　-webkit-appearance:none; /*去掉webkit默认的表单样式*/
　　}
　　a,button,input,optgroup,select,textarea {
　　　　-webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
　　}
　　input::-webkit-input-placeholder {
　　　　color:#ccc; /*修改webkit中input的planceholder样式*/
　　}
　　input:focus::-webkit-input-placeholder {
　　　　color:#f00; /*修改webkit中focus状态下input的planceholder样式*/
　　}
　　input::-webkit-input-speech-button {
　　　　display: none; /*隐藏Android的语音输入按钮*/
　　}   
</style>