1.placeholder 问题,在需要改变input框的地方做相关兼容,修改为自己需要的样式即可
input::-webkit-input-placeholder { /* WebKit browsers */
font-size:0.36rem;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-size:0.36rem;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
font-size:0.36rem;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
font-size:0.36rem;
}
2.input框获取焦点页面会自动放大的问题
- 当输入框获取焦点之后触发了webview的displaySoftKeyboard方法，导致页面放大.
- 头部加入下面的代码
- 在头部的<head>中增加第一句话，其中【apple-mobile-web-app-capable】设置Web应用是否以全屏模式运行.如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。
在头部的<head>中增加第二句话，可以让网页的宽度自动适应手机屏幕的宽度。
其中： width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
maximum-scale=1.0：表示最大的缩放比例
user-scalable=no：表示用户是否可以调整缩放比例
还有一个小小的值：
minimum-scale=0.5： 表示最小的缩放比例
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
3.去除谷歌浏览器默认黄色背景的问题
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
4.去除input框焦点边框的问题
outline:none;
网友评论