IPad webpage development tutorial and rules

Source: Internet
Author: User
Tags coding standards home screen

Limitations of iPad Development
When using Safari on an iPad to browse a webpage on a common website, the webpage needs to be manually zoomed in or down or slide because it is too large. Although this slide behavior was cited in various announcements at the beginning of the iPad's launch, however, after a long time, we will still find that this is not convenient, and it does not bring very good feelings to users.
Flash is not supported. In iPad Safari without jailbreak, Flash on the website cannot be displayed, but it can be solved through a third-party software, plug-in, or browser. However, even if Flash cannot be displayed, you can use HTML5 and CSS3 to achieve the same effect.
Without the mouse cursor, this means that the mouse attribute, such as the mouse hover attribute, is impossible. You may find some work und for this, but it will be difficult to get to your users for how to work.
The scroll bar does not work as expected. the scroll bar does not display content that contains too many partitions. The frame also has the height and width issues. In addition, two finger gestures are required during the rolling process. (We will make a full discussion below)
The position: fixed CSS attribute of HTML elements in a fixed CSS layout is not correctly displayed. It usually keeps the page on the first screen and cannot be turned down or zoomed in or out.
IPad User Detection: User Agent)
As mobile devices access the Internet, many websites detect browser types on the client, primarily by using the User Agent. If mobile browsing is detected, the website may be redirected, allows users to browse the specific versions of mobile devices. In the past, we referred to mobile devices, mainly mobile phones and other terminals. Now, iPad is also included in the ranks of mobile terminal devices, but it has a 9.7 "large screen, the Safari browser of the iPad brings a close view experience on PC computers. Therefore, the website pages corresponding to the iPad must be different from those of other mobile devices. The differences between iPad and website pages are mainly based on the User Agent of the browser.

The User Agent code of the iPad Safari browser described in iPhone OS 3.2 SDK beta 3:

Mozilla/5.0 (iPad; U; cpu OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) the User Agent code of Version/4.0.4 Mobile/7B334b Safari/531.21.10iPad Safari contains the words "Mobile" and "iPad", excluding the words "iPhone ". This must be noted. If the previous versions of the website do not differentiate the access to mobile devices, you need to modify them to prevent the corresponding device from returning an incorrect version.

Simulate access through the iPad Browser

If you cannot test the webpage through an iPad or iPhone simulator, you can still perform the test in the following way:

Use Mac OS X or Windows Safari to act as the Safari simulator menu-> preference settings-> advanced-> select "Development menu" on the menu bar ", in the menu bar, "development" is displayed. Choose "development"> "User Agent"> "Others". In the displayed dialog box, paste the preceding User Agent code and click "OK, you can use Safari to verify whether the page is suitable for iPad display.
Use Google Chrome as the simulator command line and enter:
Chrome.exe -- user-agent = "Mozilla/5.0 (iPad; U; cpu OS 3_2_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) version/4.0.4 Mobile/7B500 Safari/531.21.10 "Javascript detects the User Agent of the iPad and then redirects to the URL of the corresponding Version.
If (navigator. userAgent. match (/iPhone/I) | (navigator. userAgent. match (/iPad/I ))){
If (document. cookie. indexOf ("iphone_redirect = false") =-1 ){
Window. location = "http://ipad.www.opensoce.com ";
} PHP script detection User Agent
If (strstr ($ _ SERVER ['HTTP _ USER_AGENT '], 'iphone') | strstr ($ _ SERVER ['HTTP _ USER_AGENT '], 'ipad ')){
Header ('location: http://ipad.www.opensoce.com ');
Exit ();
} Apache redirection Detection
RewriteCond % {HTTP_USER_AGENT} ^ iPad
RewriteRule ^ index \ .. * $ ipad.html [L]
RewriteCond % {HTTP_USER_AGENT} ^ iPhone
RewriteRule ^ index \ .. * $ iphone.html [L] Nginx detection and steering
If ($ http_user_agent ~ * IPad ){
Proxy_pass http://ipad.www.opensoce.com;
If ($ http_user_agent ~ * IPhone ){
Proxy_pass http://iphone.www.opensoce.com;
} Use W3C standard website Technology
The Safari browser for iPad and iPhone does not support plug-ins and Flash.

Menus and navigation using plug-in technology (Controls) are not displayed in iPad or iPhone browsers.

Audio and video embedded using the plug-in will not be played. You can use the & lt; audio> and <video> tags of HTML5 to publish audio and video content. For more information, see HTMLMediaElement, HTMLVideoElement, and HTMLAudioElement development in the Safari DOM.

In the past, you may need plug-ins to express the animation content. In the iPad and iPhone browsers, you can directly use Javascript + CSS3 to create animations. CSS3 began to develop towards modularization, such as the box model, list module, background and border. With CSS3, you can directly create a rounded table. Previously, only images or VML technology can be used for implementation.

For HTML5 and CSS3, the earliest and successful applications in China are Netease's three mailboxes (mail.163.com; mail.126.com; www.yeah.net). When you enter the above address on the iPad, it will be switched to the iPad to adapt to the version, and users will feel very good. HTML5 has many advantages in terms of standardization and speed. According to data provided by Netease, the speed of email receiving and writing in this version is improved by 50%. In addition, there is also an advantage in that the reduction of code greatly improves the efficiency of mailbox server processing, providing a more powerful platform for future function expansion.

The future and goal of HTML5/CSS3 is to improve the network experience of everyone. Introduction to HTML5/CSS3:

* Use CSS3 gradient, font shadow, and circle boxes with borders-these are especially useful for menu bar and simple website designers.
* If you want to display a video, use the HTML5 video player instead of Flash (obviously it cannot work ).
* Use HTML5 to create offline programs and store data offline.
* Various practical tutorials are available everywhere. I used them when developing my iPad network programs. Google them to get idea. If no plug-in support is available for the Safari test on a general computer, choose preference Settings> Security> and deselect the plug-in enable option box,

Set viewpoint
Viewpoint can be understood as a window or a visible area, which is defined relative to the Windows defined by the iPad hardware. The iPad window size cannot be changed, but the viewpoint window size can be adjusted.

If Windows tag settings are specified in iPhone development, you must make necessary corrections in iPad development. For example:

On the iPhone, we use the following code to specify the screen width:

<Meta name = "viewport" content = "width = 320"/> <! -- Not Suitable for iPad --> In iPad, you must use device-width to replace the specific width limit.

<Meta name = "viewport" content = "width = device-width"/> <! -- Adapt to iPad --> we can set a scalable proportional range while setting the width.

<Meta name = "viewport" content = "width = device-width; initial-scale = 1.0; maximum-scale = 1.0;"> touch-based interaction
The external hardware keyboard is only an option for iPad, and the touch screen keyboard is the main interactive tool for iPad. When a user clicks the text box, the keyboard will pop up automatically, for example, when the user clicks <input type = "text"> or <textarea>.

IPhone and iPad users interact with webpages through fingers. The defect of this interaction method is that it cannot handle events similar to mouse stop. Therefore, the mouse events in the webpage: mousemove, mouseover, mouseout, or CSS code: hover cannot achieve the performance in the PC browser.

Touch Events: Single-finger DOM touch Events that can be processed in iPhone and iPad browsers: touchstart, touchmove, touchend, and touchcancel (when the system cancels the Touch ). The cut, copy, and paste window will pop up when you press and hold it in the input box. You can disable this function by using the-webkit-user-select: none code on the webpage.

Gestures refers to the scaling or rotating effect when two fingers touch the screen. For listening to gestures, there are also three events for iPhone/iPad: gesturestart, gestureend, gesturechange.
At the same time, the event parameter has two attributes: scale and rotation. The center value of Scale is 1. If the value is greater than 1, the image is enlarged. If the value is smaller than 1, the image is reduced.

Simulation: hover pseudo class
Because the iPhone does not have a mouse pointer, there is no hover event. The CSS: hover pseudo class is useless. However, the iPhone has a Touch event. onTouchStart is similar to onMouseOver, and onTouchEnd is similar to onMouseOut. So we can use it to simulate hover. Use Javascript:

Var myLinks = document. getElementsByTagName ('A ');
For (var I = 0; I <myLinks. length; I ++ ){
MyLinks [I]. addEventListener ('touchstart', function () {this. className = "hover" ;}, false );
MyLinks [I]. addEventListener ('touchend', function () {this. className = "" ;}, false );
} Then add the hover effect with CSS:

A: hover, a. hover {/* your hover effect */} design a link like a button. In addition, this simulation can be used on any element.

Replace contenteditable with textareas
The iPhone and iPad browsers do not support the contenteditable element.

The font size is automatically adjusted when the screen is rotated.
-Webkit-text-size-adjust is the private css of webkit:

Html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust: none;} detects the orientation of a device.
The iPhone can browse Web pages on a horizontal screen. Sometimes you may want to know the handheld status of your device to enhance availability and functionality. The following section of Javascript can determine which direction the device rotates and replace css:

Window. onload = function initialLoad () {updateOrientation ();}
Function updateOrientation (){
Var contentType = "show _";
Switch (window. orientation ){
Case 0:
ContentType + = "normal ";
ContentType + = "right ";
Case 90:
ContentType + = "left ";
Case 180:
ContentType + = "flipped ";
Document. getElementById ("page_wrapper"). setAttribute ("class", contentType );
} The iPhone/iPad only recognizes CSS.
If you do not want to detect devices, you can use CSS media queries to define styles for iPhone/iPod.

@ Media screen and (max-device-width: 480px) {} CSS3 media Query
For media queries in CSS3, iPhone and iPad are different. With this technology, you can apply different styles to different device grip directions to enhance functions and experience.

The iPhone is detected by the maximum screen width. Yes:

<Link rel = "stylesheet" media = "screen and (max-width: 320px)" href = "portrait.css"/>
<Link rel = "stylesheet" media = "screen and (min-width: 321px)" href = "landscape.css"/> unlike iPad, it directly uses the orientation attribute in the media query. Yes:

<Link rel = "stylesheet" media = "screen and (orientation: portrait)" href = "portrait.css"/>
<Link rel = "stylesheet" media = "screen and (orientation: landscape)" href = "landscape.css"/>
<! -- Note: if there are significant differences between the two style sheets, this will distract users, so this is not a required component. --> You only need to define different styles.

Zoom out
Generally, a large image of a website is larger than 480 pixels in width. If you use the code above to limit scaling, the images displayed on the iPhone will obviously exceed the screen. Fortunately, the iPhone has enough functionality. We can use CSS to enable the iPhone to automatically scale down and display large images.

@ Media screen and (max-device-width: 480px ){
Img {max-width: 100%; height: auto ;}
} Note that if the original image is very large or there are many images on a page, it is best to scale the image to 480 pixels in width on the server side. The iPhone only needs to scale down to 320 pixels during normal browsing. This will not consume too much traffic and performance.

Hidden toolbar by default
The browser toolbar of the iPhone is located at the top of the page and hidden only after the webpage is rolled. In this way, the page loading is a waste of space, especially when the screen is landscape. We can make it automatically roll up.

<Script type = "application/x-javascript">
AddEventListener ("load", function ()
SetTimeout (hideAddressbar, 0 );
}, False );
Function hideAddressbar ()
Window. scrollTo (0, 1 );
</Script> iPad icon
After the iPad is developed, the following icons are displayed:

IPad desktop, no more than 72X72 png format icons; iPhone desktop, no more than 57x57 png format icons, add in the resource section of Xcode, and in xxxInfo. set the Icon file attribute in plist to the name of the added image resource. The icon file does not need to be rounded or reflected, and the iPad/iPhone will do it on its own.
The thumbnail displayed in the Software Overview In App Store is a jpg image with the name of iTunesArtwork in the root directory of the zip file that is packaged and generated. The size must be less than 512x512.
If your user adds your website to the home screen, the iPhone uses the thumbnail of the website as the icon. However, you can provide a self-designed icon, which is certainly better. The image size is 57x57 in png format. The system automatically performs this operation without having to perform rounded corners and reflection on its own. Then add the following line to the head:
<Rel = "apple-touch-icon" href = "images/youricon.png"/> Use iScroll to control your touch scrolling
This is a simple and most useful source code that can help you control your network applications. Created by Matteo Spinelli, iScorll is a development project because the web browser engine Webkit (for iPhone, iPod, iPad, Android, and Palm) A fixed height/width element is not provided to scroll the article locally.

This unfortunate situation prevents any Web application from having a head and/or footer position: absolute CSS attribute and scrolling the content in the central area.

The iScroll code is very easy to use. If you like iScroll, you need jQuery plug-ins like jQuery Swipe and JQTouch.

IPad Local Application
* Faster running of local applications: use more iPad resources and performance.
* No need to search on the Internet: One-Stop purchase in the Apple store.
* Users feel more comfortable: They know that the program is specially made for their devices and are not suitable for HTML5/CSS3.
* Easier to open and close: The program is opened and closed without any interruption and data will not be lost.
* More difficult to develop: requires Objective-C and Apple SDK knowledge.
* Closed platform: It is difficult to modify other devices, such as the Android platform. IPad Network Application
* Emerging coding standards: HTML5, CSS3, and JavaScript are bringing Amazing client functions to the network, especially local/offline storage functions.
* The site can be customized for any browser: Switch the style sheet or redirect webpage based on the device or browser operated by your user. It can make your applications universal.
* Easy development: Use HTML, CSS, and JavaScript to create an iPad network application instead of learning a new language. You should have these skills.
* Steve Jobs cannot review your network program: The network is an open platform-meaning that you are under your control and do not need to wait for approval from the Apple store.
* The niche market does not have enough support: network applications require a lot of power, not only attracting users but also developers' participation.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.