Html mobile web development details, Html web development details

Html mobile web development details, Html web development details

1.-webkit-tap-highlight-color: rgba (255,255,255, 0) can block the shadows that appear when you click an element in ios and android.
Note: The value of transparent is invalid in android.

2.-webkit-appearance: none can shield the weird inner shadow in the input box at the same time to solve the problem that the button style cannot be modified in iOS. A small problem is found in the test. After adding the above attribute, by default, iOS still has rounded corners, but can be modified using the border-radius attribute.

3.-webkit-transform: translate3d (0, 0, 0) can make the animation smoother in ios (this property will call the hardware acceleration mode without using the JS engine, direct browser kernel rendering), but it cannot be used in android. This is why many bugs have not been seen.

4.-webkit-background-size can be used as a high-definition icon. However, in some earlier versions of android, only background-size can be identified. Therefore, it is necessary to write either of them.

5. You can use scrollTo (0, 0) to automatically hide the address bar of the browser.

6. css3 animation will affect your automatic focus, so the automatic focus should be done before the animation is executed, or you can discard it directly.

7. // the style used for Portrait Screen

@ Media all and (orientation: portrait) {.css {}}// the style used when the screen is landscape
@ Media all and (orientation: landscape) 2.16.css {}}

8. audio and video cannot be played automatically. The built-in browser has fixed this problem:

$('html').one('touchstart',function(){

Audio. play ()}) // interaction is required to trigger

9. If there are many external links involved, DNS Prefetching can help you with DNS pre-resolution. 10. If you want your site to spread more on SNS, Open Graph Protocol is suitable for you.
11. When iScroll is used, the: focus {outline: 0} pseudo class cannot be used; otherwise, the slide will become stuck.
12. full screen video playback

//x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://">>

13. Solve the Problem of flashing screen,-webkit-backface-visibility: hidden;-webkit-transform-style: preserve-3d;
14. Do not use click to replace touch events. 15. the scroll bar is not as smooth and smooth as the ios native, and has no rebound effect {overflow: auto; -webkit-overflow-scrolling: touch ;}
16. This problem is often encountered when processing web pages of IOS devices. When I click an element, the clicking area will flash. The solution is actually very simple. You only need to add the following style to the element that appears to solve the problem.
The Code is as follows:-webkit-tap-highlight-color: rgba (,); this is a style unique to ios devices. The principle is to remove the color on the back of ios devices. 17. Change the default placeholder style of input:-webkit-input-placeholder {font-size: 0.24rem; color: #545454; line-h/ight: 0.4rem} does not disappear automatically when focusing: input: focus:-webkit-input-placeholder {opacity: 0 ;} 18. When the input type = "number" is removed, the browser's up and down arrow is: input:-webkit-outer-spin-button, input :: -webkit-inner-spin-button {-webkit-appearance: none! Important; margin: 0;} 19. send a text message on the page and send an email.

// Href = "tel: 1857777777"> call: 1857777777>

SMS, invalid winphone System

// Href = "sms: 10086"> send a text message to: 10086>

Write email

//href="mailto:123@qq.com">123@qq.com>