Mobile Web Development Notes

Recently wrote a mobile project: Shanghai Metro refers to Passepartout, some of the problems encountered between, recorded (will be continuously added):

1. Rich page meta:

1.1: Control display area various properties:

<content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0 "  name=" viewport ">

• Width of the Width-viewport
• The height of the Height-viewport
• Initial-scale-Initial zoom ratio
• Minimum-scale-Minimum scale to allow the user to zoom
• Maximum-scale-Maximum scale to which the user is allowed to zoom
• User-scalable-whether the user can manually scale

Safari in 1.2:ios allows full screen browsing:

<content= "Yes"  name= "apple-mobile-web-app-capable"> 

1.3:ios in Safari top status bar style:

<content= "Black"  name= "Apple-mobile-web-app-status-bar-style"  >

1.4: Ignore change number to phone number:

<content= "Telephone=no"  name= "Format-detection" >

2. CSS Related:

2.1:img Self-adapting:

{max-width: 100%; height: auto; width: auto9/** / -ms-interpolation-mode:bicubic /**/}

2.2: Hides the back of the rotated div element, which is useful if the rotation element does not want to see its back. For transition splash screen issue:

Div{backface-visibility:Hidden;-webkit-backface-visibility:Hidden;/*Chrome and Safari*/-moz-backface-visibility:Hidden;/*Firefox*/-ms-backface-visibility:Hidden;/*Internet Explorer*/}

2.3: @-webkit-keyframes can predefine many of the animations you think of, and then call them through-webkit-transition. Like what:

@-webkit-keyframes Fadein{from{opacity:0; } to{Opacity:1; }}@-moz-keyframes Fadein{from{opacity:0; } to{Opacity:1; }}@-o-keyframes Fadein{from{opacity:0; } to{Opacity:1; }} @keyframes Fadein{from{opacity:0; } to{Opacity:1; }}img{-moz-animation:Fadein 350ms ease-out;-webkit-animation:Fadein 350ms ease-out;-o-animation:Fadein 350ms ease-out;Animation:Fadein 350ms ease-out;}/*the above CSS can be implemented when loading the page, the picture transparency changes animation effect*/

2.4:-webkit-tap-highlight-color:rgba (255,255,255,0) can simultaneously block the shadows that appear when you click an element under iOS and Android.
Note: The transparent property value is not valid under Android.

2.5:-webkit-appearance:none can also block the input box strange inner shadow, to solve the iOS cannot modify the button style, the test also found a small problem is that after adding the above properties, iOS default is still with rounded corners, but you can use Border-radius Property modification.

2.6:ios prohibit the screen when the font becomes larger,-webkit-text-size-adjust:none;

Think of so much for the time being, and then continue to add.

The above is just my personal summary, if you have better suggestions, please leave a message, together to encourage progress!! - -！