Sum up 40 Common Mobile Web page problem Solutions _javascript Tips

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

The same proportion of the picture on the PC is very clear, but the phone is very vague, what is the reason?

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 960640 resolution, on the Web page shows only 480320, So devicepixelratio=2. Android is now a mess, with 1.5 and 2 of 3.

To make the picture appear clearer on the phone, you must use a 2x background image instead of the IMG tag (typically twice times). For example, the width of a div is 100100, the background image must be 200200, and then Background-size:contain, so that the display of 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 specify the Background-size:contain; you can try!

2. Picture loading

If you encounter the problem of slow loading of the picture, in this case, mobile phone development is generally loaded with the canvas method:

Specific Canvas APIs see: http://javascript.ruanyifeng.com/htmlapi/canvas.html

The following example illustrates a canvas example:

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

JS dynamic loading pictures and Li Total examples of 17 photos!

var total=17; 
var zwin=$ (window); 
var render=function () { 
  var padding=2; 
  var winwidth=zwin.width (); 
  var Picwidth=math.floor ((winwidth-padding*3)/4); 
  var tmpl = '; 
  for (Var i=1;i<=totla;i++) { 
  var p=padding; 
  var imgsrc= ' img/' +i+ '. jpg '; 
  if (i%4==1) { 
   p = =; 
  } 
  Tmpl + = ' <li style= ' width: ' +picwidth+ ' px;height: ' +picwidth+ ' px;padding-left: ' +p+ ' px;padding-top: ' +padding+ ' px; ><canvas id= "Cvs_ ' +i+ '" "></canvas></li>"; 
  var imageobj = new Image (); 
  Imageobj.index = i; 
  Imageobj.onload = function () { 
    var cvs =$ (' #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 Web site does not need to be compatible with IE browser, generally we will use Zeptojs. Zeptojs built-in touch events method, concrete can see http://zeptojs.com/#Touch events

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

4, to prevent the phone in the Web page to enlarge and shrink , this is the most basic, the most mobile web site developers should know, is to set up meta viewport

There are also some mobile sites we see the following statement:

Copy Code code 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 up is XHTML, and if our page uses HTML5, you can simply declare <! without setting up a DTD. DOCTYPE html>.

Use viewport to prevent the page from scaling. User-scalable is typically set to 0来 to turn off user scaling of page views.

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

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

Copy Code code 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 written user-scalable=no, can be.

5, Apple-mobile-web-app-capable

Apple-mobile-web-app-capable is to set whether the Web application is running in Full-screen mode.

Grammar:

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

Description

If the content is set to yes,web the application will run in Full-screen mode, otherwise it will not. The default value for content is no, which indicates a 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 starts or disables the automatic identification of phone numbers on the 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 Android or iOS dial-up function

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

As follows:

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

Call the phone directly as follows

<a href= "tel:15677776767" > Click to Dial 15677776767</a>
8, Html5gps positioning function

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

9, up and down pull the scroll when the cotton, slow

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

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

10, prohibit copying, select text

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

Troubleshoot mobile device-selected page text (depending on product needs)

11, a long time to hold down the page appears flash-back

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

12, the iphone and ipad under the input box default inner shadow

element{
  -webkit-appearance:none; 
}

13. Translucent Gray Mask when touching elements under iOS and Android

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

Setting the alpha value to 0 removes the semitransparent gray Matte, note: The Transparent property value is not available on Android.

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

14, active compatibility processing is pseudo class: active failure

Method One: Body adds Ontouchstart

<body ontouchstart= "" >

Method Two: JS binding Touchstart or Touchend event to document

<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 Enable hardware acceleration

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

Note: 3D distortion consumes more memory and power

16, the Retina screen 1px border

element{
  Border-width:thin;
}

17, WebKit mask compatible processing

Some low-end phones do not support CSS3 mask, and can optionally be degraded for processing.

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

if (' Webkitmask ' in Document.documentElement.style) {
  alert (' Support mask ');
} else {
  alert (' Unsupported mask ');
}

18, rotate 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 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 phones have rounded corners that fail

Background-clip:padding-box;

21, the top of the status bar background color

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

Description

This meta tag does not work unless you first specify Full-screen mode using Apple-mobile-web-app-capable.

If the content is set to default, the status bar appears normally. If set to blank, the status bar will have a black background. If set to Blank-translucent, the status bar appears as Black semitransparent. If set to default or blank, the page appears below the status bar, where the status bar occupies the upper part, the page occupies the bottom part, the two are not obscured or obscured. If set to Blank-translucent, the page fills the screen, where the top of the page is obscured by the status bar (which overwrites the 20px height of the page and the Retina screen of 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 resending the request to the server. If you do not want to use caching, 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 screenshot is used as an icon.

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

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

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

24. Start Screen

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

iOS under the page to start loading when the picture displayed, to avoid loading when the screen.

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 por Trait--> <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 are not 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

For handheld devices, the main focus is on some 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 hits no high light

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

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

The problem is this, with input search do fuzzy search, 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 mobile browser can be, but in the iOS mobile browser red is very slow, with input method, not immediately corresponding KeyUp events, only after the deletion can be corresponding!

Solution:

You can replace KeyUp with HTML5 oninput events.

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

Then it achieves a similar keyup effect!

27, H5 website input set to Type=number problem

H5 Web page input type set to number usually produces three problems, one problem is that the MaxLength attribute is not used. The other is the form submission, the default to take the whole. Third, some of the Android phones appear style problems.

The problem is solved, I am currently using JS. As follows

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

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

Problem two, because form submission defaults to do form validation, step default is 1, to set the Step property, if you retain 2 decimal, the following:

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

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

If step and Min are used together, 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 the other number is invalid. This is a brief introduction to 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, 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, the default first letter capital

Solution, set the following properties

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

30. Select Drop-down Selection Setting right alignment

The settings are as follows:

Select option {
direction:rtl;
}

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

You can set the following:

 -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 End Click 300ms Delay

300ms acceptable, but because of the problems caused by 300ms, we have to solve. 300ms The user experience is not very good, to solve this problem, we generally at the mobile end with the tap event to replace the Click event.

Recommend two JS, one is Fastclick, one is Tap.js

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

33, mobile endpoint through the problem

The case is as follows:

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

<a href= "Www.jb51.net" >www.jb51.net</a>

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

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

The div 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 is earlier than touchend before click. That is, the click of the trigger is delayed, this time around 300ms, that is, we tap after the fire mask hidden, at this time click has not been triggered, after 300ms because of the mask hidden, our click Trigger to the following a link.
Solve:

(1) Try to replace the Click event with touch events. For example, use the Touchend event (recommended).
(2) using Fastclick,https://github.com/ftlabs/fastclick
(3) Use Preventdefault to block a label click
(4) Delay a certain amount of time (300ms+) to handle the event (not recommended)
(5) The above general can be solved, really do not replace the Click event.
Here are the Touchend events, 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-terminal font optimization (in the screen will appear font bold inconsistencies, etc.)

The font size is reset when the iOS browser is horizontal, and setting Text-size-adjust to none solves the problem on IOS, but the desktop version of Safari's font scaling function will fail, 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, on the IOS system, the Chinese input method in English, the letters may appear between a one-sixth space

Can be removed by the regular

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

37, Mobile end HTML5 audio AutoPlay failure problem

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

Solution method: First through the user Touchstart touch, triggering playback and pause (audio began to load, followed by JS operation is no problem).

Resolution Code:

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

38, Mobile end HTML5 input date does not support placeholder issues

This I feel there is no good solution, use the following method

Copy Code code as follows:

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

Some browsers may want to click two times!

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

Some models of search input controls will bring the Close button (a pseudo element), and usually for all browsers, we will implement one ourselves, at which point 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 select option to expand

Zepto Way:

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

Native JS Way:

function Showdropdown (sltelement) {
  var event;
  event = document.createevent (' mouseevents ');
  Event.initmouseevent (' MouseDown ', true, true, window);
  Sltelement.dispatchevent (event);