Android browser to see the background image, some devices will be blurred
because the phone resolution is too small, according to the resolution to display web pages, word will be very small, Android phones devicePixoRadio was chaotic, there is also a 3-1.5, there are 2. Want the picture more clear in the phone, you must use the 2x background to replace the img tag (all 2 times under normal circumstances), or specify the background-size: contain; can
2. To prevent the phone page zoom in and out
<Meta name = "the viewport" Content = "width = width-Device, Initial-Scale = 1.0, 1.0 = maximum-Scale, User-Scalable = 0" />
3. pull up and down the scroll bar Caton, slow
{--webkit-overflow body scrolling: Touch; overflow-scrolling: Touch;}
Android3 iOSi5 + + and support the new attribute to overflow-scrolling CSS3
4. Long press page appears flash back
element {-webkit-touch-callout: none;}
within the default input box 5.iphone shadow and ipad
element {-webkit-appearance: none ;; }
translucent gray mask when the touch element and android 6.ios
element {-webkit-tap-highlight- color: rgba (255,255,255,0);}
set the alpha value is 0 can be removed substantially transparent gray mask Remarks: transparent invalid attribute value in android.
7.active compatible process i.e. pseudo-class: active Failure
Method One: body Add ontouchstart
<body ontouchstart = ''>
Method Two: js to bind touchstart document or event touchend
<style>a{ color:#000;}a:active{ color:#fff;}</style><a href=foo>bar</a><script>document.addEventListentener('touchstart',function(){},false);)</script>
8.1px边框
In the mobile terminal, if the element is set to a pixel border, then on the phone it seems to be thicker than a pixel.
Workaround: Use pseudo-class element simulation frame, use the zoom transform
.a::after{ content: ''; display: block; width: 100%; height: 1px; background: #333; position: absolute;left: 0;bottom: 0; transform: scaleY(0.5) }
9.webkit mask兼容处理
Some low-end phones do not support css3mask, you can selectively enter downgraded
Analyzing such as may be used to refer to different js class:
if ( 'WebkitMask' in documnet.documentElement.style) {alert ( ' support mask')} else {alert ( ' not supported mask')}
10. The rotating screen, the problem of adjusting the font size
html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{ -webkit-text-size-adjust:100%;}
11.transiton闪屏
// set inline elements how to render in 3D space: Reserved 3D-webkit-transform-style: preserve-3D; // setting back the elements of conversion in the face of the user whether Courseware: Hidden -webkit-backface-visibility : hidden;
12. The rounded bug
Some Android phone failure rounded background-clip: padding-box;
13.click of 300ms latency issues
In the end the move, click the event is in effect, however, there will be a delay after clicking response of 300ms
The reason: safari was the first to make this mechanism, because the mobile terminal, the browser needs to wait for some time to determine the user operation is a click or double-click, so there is a delay mechanism click300ms, Android soon there will be a
Do not click, use custom events TAP
TAP is the need for self-definition: If a user performs touchstart in a very short time and triggered touchend, and the distance twice is very small and can not be
introduced into the library to solve fastclick
14. Responsive Images
In the mobile terminal, the processing image should be very careful, assume an image itself size X width, disposed and wrapped as wide as its div, if div width smaller than the width of the image is no problem, but if div width is greater than image width, image distortion is stretched
Solution: The maximum image so that only their own width
IMG {max-width: 100%; the display: Block; margin: Auto 0;}
15. A bug generated through point
E.g:
<div id = "haorooms"> nod Test Event </ div> <a href="www.jb51.net"> www.jb51.net </a>
div mask layer is absolute positioning, and z-index is higher than a. The label is a link to a page, we have to tap div binding events:
$ ( '# haorooms') on ( 'tap', function () {$ ( '# haorooms') hide ();.}).
We click on the mask layer div normal disappear, but when we click Mongolia on a label when the layer and found a link is triggered, which is called the point through the event.
the reason:
touchstart earlier than touchend earlier than click. That click is triggered by the delay, this time in about 300ms, Mongolia layer that is hidden after we tap the trigger. At this point click no trigger, 300ms after due Mongolian hidden layer, we click to trigger below a link.
web front-end study group: 189 394 454, to share the source code, the latest knowledge, excellent tutorial, welcome beginners and advanced junior partner in the.
solve:
1. Try to use the touch event to replace the click event. For example touchend event (recommended)
2. fastclick
3. preventDefault prevent click a tag
4. delay certain events (300ms +) to handle the event (not recommended)
.