Common mobile phone compatibility issues

With the popularity of mobile phones, the development of mobile terminals has also become an important direction, but due to the inconsistency of equipment, it will cause some compatibility problems.

1. When viewing the background image in the Android browser, some devices will be blurred.

The picture with the same scale is very clear on the PC, but it is blurred on the mobile phone, what is the reason?

After research, it is the devicePixelRatio that is to blame, because the resolution of the mobile phone is too small, if the web page is displayed according to the resolution, the characters will be very small, so Apple originally put the 960*640 resolution of the iPhone 4 and only displayed 480* in the web page. 320, so devicePixelRatio=2. Now android is more messy, there are 1.5, 2 and 3.

If you want the image to be displayed more clearly on the mobile phone, you must use a 2x background image instead of the img tag (usually 2x is used). For example, the width and height of a div is 100*100, the background image must be 200*200, and then background-size:contain;, so that the displayed image will be clearer.

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 specify background-size:contain; you can, everyone try!

2. Image loading

If you encounter the problem of slow image loading, in this case, mobile phone development generally uses the canvas method to load:

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

The following is an example of a canvas:

js dynamically loads pictures and li for a total of 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 website is not compatible with IE browser, generally we will use zeptojs.

Zeptojs has built-in Touch events method, see http://zeptojs.com/#Touch events for details

I took a look at the new API of zeptio, it already supports browsers above IE10, and you can choose to use zeptojs!

4. Prevent web pages from being enlarged and reduced in mobile phones.

This is the most basic, most mobile website developers should know, that is to set the viewport in the meta

Also, on some mobile websites we see the following statement:

code show as below:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

The way to set DTD is XHTML. If our page uses html5, we can directly declare <!DOCTYPE html> without setting DTD.

Use the viewport to disable zooming of the page. Usually set user-scalable to 0 to turn off the user's behavior of zooming the page view.

But for better compatibility, we will use the full viewport setup.

Copy the code The code is as follows:

Of course, user-scalable=0, and some people also write user-scalable=no, which is fine.

5、apple-mobile-web-app-capable

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

grammar:

illustrate:

If content is set to yes, the web application will run in full screen mode, otherwise, it will not. The default value of content is no, which means normal display. You can use the read-only property window.navigator.standalone to determine whether the page is displayed in full screen mode.

6、format-detection

format-detection Enables or disables automatic recognition of phone numbers in pages.

grammar:

illustrate:

By default, the device automatically recognizes any string that might be a phone number. Set telephone=no to disable this feature.

7. HTML5 calls the dialing function of Android or ios

HTML5 provides a tag to automatically call the dial, just add tel: to the href of the a tag.

as follows:

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

Dial the phone directly as follows

<a href="tel:15677776767">Click to dial 15677776767</a>
8. html5GPS positioning function

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

9. When the scroll bar is pulled up and down, it is stuck and slow

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

Android3+ and iOS5+ support CSS3's new property overflow-scrolling

10. Prohibit copying, selected text

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

Workaround for mobile devices with optional page text (depending on product needs)

11. Press and hold the page for a long time and the page will flash back

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

12. Default inner shadow of input box under iphone and ipad

Element{
-webkit-appearance:none;
}

13. Translucent gray mask appears 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 mask. Note: The transparent attribute value is invalid under android.

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

14. Active compatible processing is pseudo-class: active invalid

Method 1: add ontouchstart to the body

Method 2: JS binds the touchstart or touchend event to the document

15. Animation definition 3D enables hardware acceleration

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

Note: 3D warping consumes more memory and power

16. 1px border of Retina screen

Element{
border-width:thin;
}

17. Webkit mask compatible processing

Some low-end mobile phones do not support css3 mask and can be selectively downgraded.

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

if('WebkitMask'indocument.documentElement.style){
alert('mask is supported');
}else{
alert('mask is not supported');
}

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

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{
-webkit-text-size-adjust:100%;
}

19. transition splash screen

/Set how the embedded element is rendered in 3D space: preserve 3D /
-webkit-transform-style: preserve-3d;
/Set whether the back of the transformed element is visible when facing the user: hidden /
-webkit-backface-visibility :hidden;

20. Rounded corner bug

Some Android phones have rounded corners not working

background-clip: padding-box;

21. Background color of the top status bar

illustrate:

This meta tag has no effect unless you first specify fullscreen mode with apple-mobile-web-app-capable.

If content is set to default, the status bar is displayed normally. If set to blank, the status bar will have a black background. If set to blank-translucent, the status bar appears black and translucent. If set to default or blank, the page is displayed below the status bar, that is, the status bar occupies the upper part and the page occupies the lower part, and the two do not block each other or are blocked. If set to blank-translucent, the page fills the screen where the top of the page is obscured by the status bar (which covers the page 20px height compared to 40px for Retina screens on iphone4 and itouch4). The default value is default.

22. Set the cache

Mobile pages are usually cached after the first load, and each refresh will use the cache instead of re-sending the request to the server. You can set no-cache if you don't want to use the cache.

23. Desktop icons

Different desktop icons are defined for different devices under iOS. If not defined, the current screenshot will be used as the icon.

The above writing may feel that there will be a default gloss, the following setting method can remove the gloss effect and restore the effect of the design drawing!

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

24. Startup screen

The picture of the screen displayed when the page starts to load under iOS, so as to avoid the white screen when loading.

Different sizes can be specified through madia:

<link href="apple-touch-startup-image-320x460.png"media="(device-width: 320px)" rel="apple-touch-startup-image"/>

<link href="apple-touch-startup-image-640x920.png"media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>

<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">

<link href="apple-touch-startup-image-768x1004.png"media="(device-width: 768px) and (orientation: portrait)"rel="apple-touch-startup-image"/>

<link href="apple-touch-startup-image-748x1024.png"media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"/>

<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"/>

<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 to test the following!

QQ browser private

full screen mode

Force vertical screen

Force landscape

application mode

UC Browser Private

full screen mode

Force vertical screen

Force landscape

application mode

other

Optimized for handheld devices, mainly for some old browsers that do not recognize viewports, such as BlackBerry

Microsoft's old-fashioned browser

windows phone click no highlight

26. The input keyboard events keyup, keydown and keypress support in IOS are not very good

The problem is this, when using input search to do a fuzzy search, enter a keyword in the keyboard, it will be queried through the ajax background, and then the data will be returned, and then the returned data will be marked with red keywords. Using input to monitor the keyboard keyup event is possible in the Android mobile browser, but it is very slow to turn red in the ios mobile browser. After inputting with the input method, the keyup event is not immediately responded, only after deleting it can respond!

Solution:

You can use the oninput event of html5 to replace keyup

<input type="text"id="testInput">
<script type="text/javascript">
document.getElementById('testInput').addEventListener('input',function(e){
varvalue = e.target.value;
});
</script>

Then achieve a similar keyup effect!

27. The problem that the input of the h5 website is set to type=number

Setting the type of h5 web page input to number generally causes three problems. One problem is that the maxlength attribute is not easy to use. The other is that when the form is submitted, it is rounded by default. Third, some Android phones have style problems.

Once the problem is solved, I am currently using js. as follows

<input type="number"oninput="checkTextLength(this ,10)">

functioncheckTextLength(obj, length) {
if(obj.value.length > length) {
obj.value = obj.value.substr(0, length);
}
}

The second question is because the form is submitted by default, and the form is verified by default. The default step is 1. To set the step attribute, if 2 decimal places are reserved, the writing method is as follows:

Regarding the step, I will give a brief introduction here. When type=number in the input, an up and down arrow is generally automatically generated. Clicking the up arrow will add a step by default, and clicking the down arrow will decrease a step by default. The default step in number is 1. That is, step=0.01, you can enter 2 decimal places, and click the up and down arrows to increase by 0.01 and decrease by 0.01 respectively.

If step and min are used together, the value must be between min and max.

See the example below:

What numbers can be entered in the input box?

First, the minimum value is 1, then you can enter 1.0, the second is you can enter (1+3.1) that is 4.1, and so on, each time you click the up and down arrows, it will increase or decrease by 3.1, and other numbers are invalid. This is a brief introduction to step.

Question 3, remove the default style of input

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. ios setting the input button style will be overwritten by the default style

The solution is as follows:

input,
textarea {
border: 0;
-webkit-appearance: none;
}

Set the default style to none

29. IOS keyboard letter input, the default first letter is capitalized

Solution, set the following properties

30. Select drop-down selection setting right alignment

The settings are as follows:

select option {
direction: rtl;
}

31. Skew deformation through transform, rotate rotation will cause 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. Mobile click delay of 300ms

300ms is acceptable, but because of the problems that 300ms creates, we have to solve it. 300ms causes the user experience is not very good, to solve this problem, we generally use the tap event to replace the click event on the mobile side.

Two js are recommended, one is fastclick and the other is tap.js

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

33. Mobile endpoint penetration problem

The case is as follows:

<div id="haorooms">Nodding event test</div>

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

The div is an absolutely positioned mask, and has a z-index higher than a. And the a tag is a link in the page, we bind the tap event to the div:

$('#haorooms').on('tap',function(){
$('#haorooms').hide();
});

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

reason:

touchstart precedes touchend and click. That is to say, there is a delay in the triggering of the click. This time is about 300ms, which means that the mask is hidden after the tap is triggered. At this time, the click has not been triggered. After 300ms, because the mask is hidden, our click is triggered to the following a. on the link.
solve:

(1) Try to use touch events to replace click events. For example use the touchend event (recommended).
(2) Use fastclick, https://github.com/ftlabs/fastclick
(3) Use preventDefault to prevent the click of the a tag
(4) Delay a certain time (300ms+) to process the event (not recommended)
(5) The above are generally all It can be solved, but if it doesn't work, replace it with a click event.
The touchend event is described below, as follows:

$("#haorooms").on("touchend",function(event) {
event.preventDefault();
});

34. Eliminate the cross in IE10

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

35. About the optimization of fonts on iOS and OS X (the fonts will be bold and inconsistent in horizontal and vertical screens, etc.)

The font size will be reset when the iOS browser is in landscape orientation. Setting text-size-adjust to none can solve the problem on iOS, but the font scaling function of the desktop version of Safari will not work, so the best solution is to set text-size-adjust to 100%.

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

36. Regarding the iOS system, when entering English with the Chinese input method, a sixth space may appear between letters

can be removed by regex

this.value = this.value.replace(/\u2006/g,'');

37. Mobile HTML5 audio autoplay failure problem

This is not a bug, because the automatic playback of audio or video in the web page will bring some troubles or unnecessary traffic consumption to the user, so Apple and Android systems usually prohibit automatic playback and use JS-triggered playback, which must be done by the user. Trigger to play.

Solution idea: First touch by the user touchstart, trigger playback and pause (the audio starts to load, and it is no problem to use JS to operate later).

Solution 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

I don't think there is any good solution for this, use the following method

Copy the code The code is as follows:

Some browsers may have to click twice!

39. Some models have an input whose type is search, and have their own close button style modification method

The search input control of some models will come with a close button (a pseudo-element), and usually in order to be compatible with all browsers, we will implement one by ourselves. At this time, the method to remove the native close button is:

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

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

40. Arouse the option expansion of select

zepto way:

$(sltElement).trrgger("mousedown");

Native js way:

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

Common mobile phone compatibility issues

Guess you like