Recently, I have encountered many pitfalls of Apple and Android when doing mobile web pages. Let’s summarize the records.
Tip: Do not use the scroll bar to solve the problem of drop-down loading on the mobile phone, because the Apple system has elastic sliding of rubber bands, which will make the problem more troublesome. It is recommended to solve directly through the touch screen
①Modify the default style of the Apple button: The style that comes with the iPhone will replace the custom css style, as long as you add a sentence to remove the css in the style to remove the default button style of the iPhone and iPad.
input[type=
"button"
], input[type=
"submit"
], input[type=
"reset"
] {
-webkit-appearance:
none
;
}
textarea { -webkit-appearance:
none
;}
②Remove the yellow background brought by autocomplete in the browser
input:-webkit-autofill {
-webkit-box-shadow:
0
0
0px
1000px
white
inset
;
}
③ Modify the problem that the numbers under the IPhone are automatically underlined. Here I encounter the automatic detection of the highlighted mobile phone number
When developing an iPhone application, the mobile phone number under Safari is underlined by default, which can be removed by the following method:
<meta name="format-detection" content="telephone=no" />
④ The H5 page window is automatically adjusted to the device width, and the user is prohibited from zooming the page
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
⑤ Ignore the recognition of email addresses in the Android platform
<meta name="format-detection" content="email=no" />
⑥ When using borders for circular images on Android, the borders are displayed distorted
Solution: Nest an element outside img and use rounded corners for it
div{width:100px;height:100px;display: inline-block; border-radius: 50%; border: 3px solid #FFA500;}
img{width:100px;height:100px;border-radius: 50%;}
⑦ When the focus is on the input, the placeholder is not hidden
Solution:
input:focus::-webkit-input-placeholder{ opacity: 0;}
⑧input file upload pictures and videos to call API
<input type="file">的accept 属性
<!-- Select Photo -->
<input type="file" accept="image/*" capture="camera">
<!-- Select Video -->
<input type="file" accept="video/*" capture="camcorder">
⑧ Call and send text messages
Call <a href="tel:10086">Call: 10086</a>
Text <a href="sms:10086">SMS to: 10086</a>-----message
⑨ Prohibit ios and android users from selecting text
.css{-webkit-user-select:none;}
⑩The color value of the placeholder of the webkit form input box is changed
input::-webkit-input-placeholder{color:# 90EE90;}
input:focus::-webkit-input-placeholder{color:# 87CEEB;}