Common compatibility issues on the mobile side

With the popularity of mobile phones, mobile development has become an important direction, but because the device is not unified will cause some compatibility problems,

1, Android browser to see the background picture, some devices will be blurred.

With the same proportion of pictures on the PC is very clear, but the phone is very vague, why is it?

After research, is Devicepixelratio mischief, because the cell phone resolution is too small, if the resolution to display the page, so the word will be very small, so Apple originally put the iphone 4 960*640 resolution, on the page only show the 480* 320, so devicepixelratio=2. Now Android is chaotic, there are 1.5, there are 2 also have 3.

To make the image appear clearer on your phone, you must use the 2x background image instead of the IMG tag (typically twice times). For example, the width of a div is 100*100, the background map must be 200*200, and then Background-size:contain, so the picture is more clear.

The code can be as follows:

background:url(../images/icon/all.png) no-repeat center center; -webkit-background-size:50px 50px; background-size: 50px 50px;display:inline-block; width:100%; height:50px; 

or designate Background-size:contain; all can, everybody try!

2. Image loading

If you have problems with slow loading of pictures, in this case, mobile phone development is generally loaded with the canvas method:

For specific canvas APIs see: http://javascript.ruanyifeng.com/htmlapi/canvas.html

An example of a canvas is illustrated below:

<li><canvas></canvas></li>

JS dynamic loading pictures and Li Total example 17 pictures!

vartotal=17;
varzwin=$ (window);
Varrender=function () {
varpadding=2;
Varwinwidth=zwin.width ();
Varpicwidth=math.floor ((winwidth-padding*3)/4);
Vartmpl = ";
for (vari=1;i<=totla;i++) {
varp=padding;
Varimgsrc= ' img/' +i+ '. jpg ';
if (i%4==1) {
P=0;
}
Tmpl + = ' <li style= ' width: ' +picwidth+ ' px;height: ' +picwidth+ ' px;padding-left: ' +p+ ' px;padding-top: ' +padding+ ' px; " ><canvas id= "Cvs_ ' +i+ '" ></canvas></li> ";
Varimageobj = NewImage ();
Imageobj.index = i;
Imageobj.onload = function () {
Varcvs =$ (' #cvs_ ' +this.index) [0].getcontext (' 2d ');
Cvs.width = This.width;
Cvs.height=this.height;
Cvs.drawimage (this,0,0);
}
IMAGEOBJ.SRC=IMGSRC;
}
}
Render ();

3, if the mobile site is not compatible with IE browser, generally we will use Zeptojs.

Zeptojs built-in Touch events method, you can see http://zeptojs.com/#Touch events

Look at the Zeptio new version of the API, has supported IE10 above the browser, the ZEPTOJS can choose to use!

4, to prevent the mobile phone in the enlargement and reduction of the page.

This is the most basic, the most mobile site developers should know, is to set the meta-viewport

Also, some mobile sites we see the following statement:

The code is as follows:

<! DOCTYPE HTML PUBLIC "-//wapforum//dtd XHTML Mobile 1.0//en" "Http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >

The way the DTD is set is the XHTML notation, and if our page is using HTML5, you can simply declare <! without setting up a DTD. DOCTYPE html>.

Use viewport to prevent the page from zooming. Usually the user-scalable is set to zero to close the user's behavior on page view scaling.

<meta name= "viewport" content= "user-scalable=0"/>

But for better compatibility, we'll use the full viewport setting.

Copy CodeThe code is as follows:

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

Of course, user-scalable=0, some people also write user-scalable=no, all can.

5, Apple-mobile-web-app-capable

Apple-mobile-web-app-capable is to set whether the Web app runs in full-screen mode.

Grammar:

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

Description

If the content is set to yes,web the app will run in full-screen mode, or vice versa. The default value for content is no, which indicates normal display. You can use the read-only property window.navigator.standalone to determine whether a Web page is displayed in full-screen mode.

6, Format-detection

Format-detection starts or disables the phone number in the auto-identify page.

Grammar:

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

Description

By default, the device automatically recognizes any string that might be a phone number. Setting Telephone=no can disable this feature.

7, HTML5 call the Android or iOS dialing function

HTML5 provides a label for automatic call dialing, as long as you add Tel: in the href of the a tag.

As follows:

<ahref= "tel:4008106999,1034" >400-810-6999 turn 1034</a>

Call the phone directly as follows

<a href= "tel:15677776767" > click to call 15677776767</a>
8. Html5gps Positioning function

For details, see: Http://www.jb51.net/post/html5_GPS_getCurrentPosition

9, pull the scroll bar up and down, slow

body {-webkit-overflow-scrolling:touch; overflow-scrolling:touch;}

The new properties of android3+ and ios5+ support CSS3 are overflow-scrolling

10. Prohibit copying and selecting text

Element {-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
User-select:none;
}

Resolve mobile devices to select page text (depending on product needs)

11, long time to press and hold the page flash back

element {
-webkit-touch-callout:none;
}

12. The default inner shadow of the input box under iphone and ipad

element{
-webkit-appearance:none;
}

13. Translucent gray matte when touching elements under iOS and Android

Element {
-webkit-tap-highlight-color:rgba (255,255,255,0)
}

Set the alpha value to 0 to remove the translucent gray matte, note: The Transparent property value is not valid under Android.

The following article has detailed introduction, address: Http://www.jb51.net/post/phone_web_ysk

14, active compatibility processing is pseudo-class: Active failure

Method One: Body add Ontouchstart

<body ontouchstart= "" >

Method Two: JS to document BIND Touchstart or Touchend event

<style>
A
Color: #000;
}
a:active {
Color: #fff;
}
</style>
<a Herf=foo >bar</a>
<script>
Document.addeventlistener (' Touchstart ', function () {},false);
</script>

15. Animation Definition 3D Hardware acceleration enabled

Element {
-webkit-transform:translate3d (0,0,0)
Transform:translate3d (0,0,0);
}

Note: 3D distortion consumes more memory and power

16.1px Frame of Retina screen

element{
Border-width:thin;
}

17, WebKit mask compatible processing

Some low-end phones do not support CSS3 mask, and can selectively downgrade processing.

For example, you can use JS judgment to refer to different classes:

if (' Webkitmask ' Indocument.documentElement.style) {
Alert (' Support mask ');
}else{
Alert (' Mask not supported ');
}

18. When rotating the screen, the font size adjustment problem

HTML, body, form, fieldset, p, Div, H1, H2, H3, H4, H5, h6{
-webkit-text-size-adjust:100%;
}

19. Transition splash Screen

/set how embedded elements are rendered in 3D space: Reserved 3D/
-webkit-transform-style:preserve-3d;
/sets whether the back of the element to be converted is visible when facing the user: hidden/
-webkit-backface-visibility:hidden;

20. Fillet bug

Some Android phone rounded corners fail

Background-clip:padding-box;

21. Top status bar background color

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

Description

This meta tag will not work unless you first use apple-mobile-web-app-capable to specify full-screen mode.

If content is set to default, the status bar is displayed correctly. If set to blank, the status bar will have a black background. If set to Blank-translucent, the status bar appears as black translucent. If set to default or blank, the page appears below the status bar, where the status bar occupies the upper part, and the page occupies the lower part, which does not obscure or obscure the other. If set to Blank-translucent, the page fills the screen, where the top of the page is obscured by the status bar (which overrides the 20px height of the page, while the Retina screen for iphone4 and ITOUCH4 is 40px). Defaults are default values.

22. Set the cache

<meta http-equiv= "Cache-control" content= "No-cache"/>

Mobile pages are usually cached after the first load, and then each refresh uses the cache instead of going back to the server to send the request. If you do not want to use the cache, you can set No-cache.

23. Desktop icons

<link rel= "Apple-touch-icon" href= "Touch-icon-iphone.png"/>
<link rel= "Apple-touch-icon" sizes= "76x76" href= "Touch-icon-ipad.png"/>
<link rel= "Apple-touch-icon" sizes= "120x120" href= "Touch-icon-iphone-retina.png"/>
<link rel= "Apple-touch-icon" sizes= "152x152" href= "Touch-icon-ipad-retina.png"/>

Different desktop icons are defined for different devices under iOS. If not defined, the current screen is used as an icon.

The above-mentioned may feel that there will be a default gloss, the following setting method can remove the gloss effect, restore the effect of the design chart!

<link rel= "apple-touch-icon-precomposed" href= "Touch-icon-iphone.png"/>

Image size can be set to 5757 (px) or retina can be set to 114114 (px), ipad size is 72*72 (px)

24. Start Screen

<link rel= "Apple-touch-startup-image" href= "Start.png"/>

The screen image that is displayed when the page starts loading under iOS to avoid white screen when loading.

You can specify a different size by Madia:

<!--iphone-->
<link href= "Apple-touch-startup-image-320x460.png" media= "(device-width:320px)" Rel= "Apple-touch-startup-image "/>
<!--iPhone Retina---
<link href= "Apple-touch-startup-image-640x920.png" media= "(device-width:320px) and (-webkit-device-pixel-ratio: 2) "rel=" Apple-touch-startup-image "/>
<!--IPhone 5-->
<link rel= "Apple-touch-startup-image" media= "(device-width:320px) and (device-height:568px) and (- Webkit-device-pixel-ratio:2) "href=" Apple-touch-startup-image-640x1096.png ">
<!--IPad portrait-->
<link href= "Apple-touch-startup-image-768x1004.png" media= "(device-width:768px) and (orientation:portrait)" rel= "Apple-touch-startup-image"/>
<!--IPad landscape-->
<link href= "Apple-touch-startup-image-748x1024.png" media= "(device-width:768px) and (Orientation:landscape)" rel = "Apple-touch-startup-image"/>
<!--IPad Retina portrait-->
<link href= "Apple-touch-startup-image-1536x2008.png" media= "(device-width:1536px) and (orientation:portrait) and (-webkit-device-pixel-ratio:2) "rel=" Apple-touch-startup-image "/>
<!--IPad Retina landscape-->
<link href= "Apple-touch-startup-image-1496x2048.png" media= "(device-width:1536px) and (Orientation:landscape) and (-webkit-device-pixel-ratio:2) "rel=" Apple-touch-startup-image "/>

25. Browser private and other meta

The following properties have not been applied in the project, you can write a demo test below!

QQ Browser Private

Full Screen mode

<meta name= "X5-fullscreen" content= "true" >

Force vertical Screen

<meta name= "X5-orientation" content= "Portrait" >

Force horizontal Screen

<meta name= "x5-orientation" content= "Landscape" >

Application Mode

<meta name= "X5-page-mode" content= "App" >

UC Browser Private

Full Screen mode

<meta name= "Full-screen" content= "yes" >

Force vertical Screen

<meta name= "Screen-orientation" content= "Portrait" >

Force horizontal Screen

<meta name= "screen-orientation" content= "Landscape" >

Application Mode

<meta name= "Browsermode" content= "Application" >

Other

Optimized for handheld devices, mainly for older browsers that do not recognize viewport, such as BlackBerry

<meta name= "handheldfriendly" content= "true" >

Microsoft's old-fashioned browser

<meta name= "mobileoptimized" content= ">"

Windows Phone clicks No highlight

<meta name= "Msapplication-tap-highlight" content= "no" >

26, iOS input keyboard event KeyUp, KeyDown, keypress support is not very good

The problem is that when using input search to do fuzzy search, in the keyboard input keywords, will be through the Ajax background query, and then return the data, and then the returned data for the keyword red. Using input to monitor the keyboard KeyUp event, in the Android phone browser is possible, but in the iOS phone browser red very slow, with input methods, not immediately corresponding KeyUp events, only after the deletion can be appropriate!

Workaround:

Can use the HTML5 Oninput event to replace the KeyUp

<input type= "text" id= "Testinput" >
<script type= "Text/javascript" >
document.getElementById (' Testinput '). AddEventListener (' input ', function (e) {
Varvalue = E.target.value;
});
</script>

Then you can achieve a similar keyup effect!

27, H5 website input set to Type=number problem

H5 the type of Web page input is set to number generally produces three problems, one problem is that the MaxLength property is not good to use. The other one is when the form is submitted, the default is to take the whole. Third, some Android phones appear style problems.

Problem solved, I currently use JS. As follows

<input type= "number" oninput= "checktextlength (this, ten)" >

Functionchecktextlength (obj, length) {
if (Obj.value.length > Length) {
Obj.value = obj.value.substr (0, length);
}
}

Issue two, because the form submission default form validation, step default is 1, to set the Step property, if you retain 2 decimal places, the following wording:

<input type= "number" step= "0.01"/>

About step, I am here to do a simple introduction, input in Type=number, generally will automatically generate a up and down arrow, click on the arrow to add a step by default, click the down arrow by default will reduce a step. The default step in number is 1. That is step=0.01, you can allow 2 decimal places, and click the up and down arrows to increase 0.01 and decrease by 0.01 respectively.

If step is used together with min, then the value must be between Min and Max.

Look at the following example:

<input type= "number" step= "3.1" min= "1"/>

What numbers can I enter in the input box?

First, the minimum value is 1, then you can enter 1.0, the second is can be entered (1+3.1) that is 4.1, and so on, each click up and down arrows will increase or decrease by 3.1, enter another number is invalid. This is the simple introduction of step.

Problem three, remove input default style

Input[type=number] {
-moz-appearance:textfield;
}
Input[type=number]::-webkit-inner-spin-button,
Input[type=number]::-webkit-outer-spin-button {
-webkit-appearance:none;
margin:0;
}

28. The iOS Settings Input button style will be overridden by the default style

The solution is as follows:

Input
TEXTAREA {
border:0;
-webkit-appearance:none;
}

Set Default style to None

29, iOS keyboard letter input, default first letter capitalization

Solutions, set the following properties

<input type= "text" autocapitalize= "Off"/>

30. Select drop-down to set right alignment

Settings are as follows:

Select option {
Direction:rtl;
}

31, through the transform skew deformation, rotate rotation will cause the occurrence of sawtooth phenomenon

Can be set as follows:

-webkit-transform:rotate ( -4deg) skew (10deg) Translatez (0);
Transform:rotate ( -4deg) skew (10deg) Translatez (0);
outline:1px solid Rgba (255,255,255,0)

32. Click 300ms Delay on the mobile side

300ms acceptable, but because of the problem of 300ms, we have to solve. 300MS caused the user experience is not very good, to solve this problem, we generally on the mobile side with the tap event to replace the Click event.

Recommended two JS, one is Fastclick, the other is Tap.js

For 300ms latency, see: http://thx.github.io/mobile/300ms-click-delay/

33. Mobile Endpoint Penetration problem

The cases are as follows:

<div id= "haorooms" > Nod event Test </div>

<a href= "Www.baidu.net" >www.baidu.com</a>

The DIV is an absolutely positioned mask, and Z-index is higher than a. A tag is a link in the page where we bind the tap event to the DIV:

$ (' #haorooms '). On (' Tap ', function () {
$ (' #haorooms '). Hide ();
});

The div normally disappears when we click on the mask, but when we click on the mask on the a tag, we find that a link is triggered, which is called a point-through event.

Reason:

Touchstart earlier than touchend earlier than click. That is, the click Trigger is a delay, the time is about 300ms, that is, we tap to hide after the mask, when the click has not been triggered, after 300ms due to mask hidden, our click triggered to the following a link.
Solve:

(1) Use the touch event as much as possible to replace the Click event. For example, use the Touchend event (recommended).
(2) using Fastclick,https://github.com/ftlabs/fastclick
(3) block the click of a tag with preventdefault
(4) Delay a certain amount of time (300ms+) to handle the event (not recommended)
(5) The above generally can be resolved, it is not possible to replace the Click event.
Here's a look at the Touchend event, as follows:

$ ("#haorooms"). On ("Touchend", function (event) {
Event.preventdefault ();
});

34, eliminate the IE10 inside the fork number

Input:-ms-clear{display:none;}

35, about IOS and OS X-side font optimization (the screen will appear font bold inconsistency, etc.)

iOS browser will reset the font size when you screen, set Text-size-adjust to None to solve the problem on iOS, but the desktop version of Safari font scaling function will be invalidated, so the best solution is to Text-size-adjust to 100%.

-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;

36, about the IOS system, the Chinese input method input in English, there may be a one-sixth space between the letters

Can be removed by regular means

This.value = This.value.replace (/\u2006/g, ");

37, Mobile end HTML5 audio AutoPlay failure problem

This is not a BUG, because automatically play the Web page of audio or video, will give users some disturbing or unnecessary traffic consumption, so the Apple system and Android system will usually prohibit the automatic play and use JS trigger play, must be triggered by the user to play.

Solution idea: First through the user Touchstart touch, trigger play and pause (the audio starts to load, the back with JS again operation will be no problem).

Workaround Code:

Document.addeventlistener (' Touchstart ', function () {
document.getElementsByTagName (' audio ') [0].play ();
document.getElementsByTagName (' audio ') [0].pause ();
});

38. Mobile-HTML5 input date does not support placeholder problem

This I feel there is no good solution, using the following methods

Copy CodeThe code is as follows:

<input placeholder= "Date" class= "Textbox-n" type= "text" onfocus= "(this.type= ' Date ')" id= "Date" >

Some browsers may have to click two times!

39, some models exist type search input, with the Close button style modification method

Some models of the search input control will come with a close button (a pseudo element), and usually in order to be compatible with all browsers, we will implement one ourselves, the method of removing the native Close button is

#Search::-webkit-search-cancel-button{
Display:none;
}

If you want to use the native Close button and want to make it conform to the design style, you can modify the style of the pseudo-element.

40. Invoke the option of select to expand

Zepto Way:

$ (sltelement). Trrgger ("MouseDown");

Native JS mode:

Functionshowdropdown (sltelement) {
Varevent;
event = document.createevent (' mouseevents ');
Event.initmouseevent (' MouseDown ', true,true, window);
Sltelement.dispatchevent (event);
};

Article reprint: http://www.jb51.net/article/84973.htm

? Read the full text

Common compatibility issues on the mobile side