iOS mobile front end Development summary

iOS mobile front end can also be said to be the iphone mobile front end, did not know that there are some pits, recorded, so that the next time will not forget, I hope this article can help to do the iphone mobile front end of you. Of course, some of the content is also available on Android, if you find the wrong place or have better skills, please let me know the message.

One: After the input box is clicked, the page will enlarge

A pit of the iphone, when your page has a form that needs to fill in the content, when focused, the found page zooms in, which can lead to some design distortions, such as the presence of a horizontal scroll bar beyond the content.

Solution: It is very simple, do not let the user enlarge the operation of the page, add the following meta.

name="viewport" content="width=device-width, initial-scale=1, user-scalable=no;"/>

User-scalable=no that the user is not allowed to click on the screen to enlarge;

Second: The Mask click on the display will not be full screen, you need to swipe the following to full screen

Android does not appear in this case, iOS because the element is not visible at first, click on the display can not fill the full screen, so remember to add a mask to the background height of the window height, the bug can be found in bootstrap issue: https:// github.com/angular-ui/bootstrap/issues/1812

var winHeight= $(window).height();  $(".modal-backdrop").css("height",winHeight);

Three: Don't let the user enlarge the picture and the text

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

maximum-scale=1 block user zoom, scale is 1:1

Four: RESET button style

iOS defaults to a button plus a button plus an iOS style, you need to add

button,input[type="button"]{-webkit-appearance:none;*overflow:visible;}

Other tips for using the iOS mobile front end

One: JavaScript prompts the user to add to the home screen

Http://caibaojian.com/add-to-home-screen.html

A previous article about the iphone can be added to the home screen, so that through the mobile phone desktop like Open the Web page, which is more appropriate to rely on the mobile front page, if it is open one or two times, add this hint is a bit disturbing users, so you can add as needed.

Two: Set WEB applications

1. Set the picture path to the home screen icon with a default value of 57x57

<link rel="apple-touch-icon" href="/custom_icon.png"/>

2. Defining other device size images

<link rel="apple-touch-icon" href="touch-icon-iphone.png" /><link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /><link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

3. Loading images when loading pages

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

4. Hide bottom iphone button bar, look more like iphone App

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

5. Change the status bar type

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

6. When the Web download is complete, you can hide the URL bar, for reference: Hiding the Address toolbar on your phone

window.onload = function(){setTimeout(function(){window.scrollTo(0, 1);}, 100);}

If you rotate the device, you must add the Resize event

jQuery resize event$(window).resize(function() {window.scrollTo(0, 1);});7.如果不想讓使用者滑動網頁，可以加入底下

document.addEventListener("touchmove", function(event){event.preventDefault();}, false);

Link Recommendation:

http://code.tutsplus.com/

https://developer.apple.com/library/

http://blog.wu-boy.com/

To pick up the Big Apple scan look at one of the pages I've done:

iOS mobile front end Development summary