H5 case sharing: HTML5 Mobile development Fine Beauty

HTML5 Mobile Development Fine Beauty

1 , H5 the page window automatically adjusts to the device width and prevents users 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 "/>

2 , ignoring numbers in the page as phone numbers

<meta name= "format-detection" content= "Telephone=no"/>

3. Ignore the recognition of email address in Android platform

<meta name= "format-detection" content= "Email=no"/>

4 , Android on the circle picture using Border , the border appears deformed

Workaround: Nest an element outside an 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%;}

<div>

</div>

5 , focus on input when the placeholder No hidden

Workaround:

input:focus::-webkit-input-placeholder{opacity:0;}

6 , HTML5 Mobile Phone input File upload images, videos called API

<input type= "File" > 's Accept Property

①<!-- Select Photo -

<input type= "File" accept= "image/*" capture= "Camera" >

②<!-- Select Video -

<input type= "File" accept= "video/*" capture= "camcorder" >

7, call to send text message how to realize

① Call

<a href= "tel:10086" > Call: 10086</a>

② Texting

<a href= "sms:10086" > Texting: 10086</a>

8, ① users click on a link, there will be a translucent gray matte , if you want to disable, you can set the alpha value of-webkit-tap-highlight-color 0, that is, the last one of the property value is set to 0 to remove the translucent gray matte

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

② if the background transparency of a div is not 1, but 0.5 or other values, and the transparency is set with opacity, then the other elements in the Div will also become the corresponding transparency

Workaround:

The background color uses RGBA, and the last parameter value of RGBA is set to transparency

Div{background:rgba (0,0,0,0.2);}

9, what is the retina display, brought about what problems

Retina: An ultra-high pixel density LCD screen, the same size of the screen display pixel points from 1 to multiple, such as on the same screen, the Apple device's Retina display, pixel points 1 into 4

When the bitmap in the HD display is magnified, the image becomes blurred, so the visual artwork on the mobile side is typically twice times the size of a traditional PC

The front-end response, then, is:

The picture cut out by the design is guaranteed to be an even number, and the image is reduced to the original 1/2 using Backgroud-size.

The sample width height is: 200px*200px, then the wording is as follows

. css{width:100px;height:100px;background-size:100px 100px;}

Other elements of the original value of 1/2, such as the visual version of the 40px font, using the style of writing 20px

. css{font-size:20px;}

10, play video not full screen

① currently only ios7+, winphone8+ support AutoPlay

② Support for airplay devices (e.g. speaker, Apple TV) playback

X-webkit-airplay= "true"

③ playback Video Not full screen, ios7+, winphone8+ support, some android4+ support (including Huawei, Xiaomi, Meizu)

Webkit-playsinline= "true"

<video x-webkit-airplay= "true" webkit-playsinline= "true" preload= "Auto" autoplay src= "Mp4/1.mp4" ></video >

11. Disable the selection of text for iOS and Android users

. Css{-webkit-user-select:none;}

12, WebKit form input box placeholder color value can change?

input::-webkit-input-placeholder{color:# 90ee90;}

input:focus::-webkit-input-placeholder{color:# 87CEEB;}

Of course, small series did not test all the phone models, such as in accordance with the above methods, still can not solve the corresponding problems of small partners Please do not be sad oh, if there is a better solution, you can h5-share on the public number of small messages Oh ~ ~ ~

H5 case sharing: HTML5 Mobile development Fine Beauty