iPad web development tutorial and rules

By Ipad

Limitations of iPad development

  1. When using Safari on the iPad to browse ordinary web pages, the web pages are too large and need to be manually zoomed in, zoomed out or swiped, although this kind of swipe The behavior was talked about in all kinds of publicity at the beginning of the iPad’s launch, but over time we will still find it inconvenient to do so, and the user experience is not very good.
  2. Flash is not supported. In the iPad Safari without jailbreak, the Flash of the website cannot be displayed, but it can be solved by third-party software or plug-ins or browsers. However, even if Flash cannot be displayed, you are the same The same effect can be achieved with HTML5 and CSS3.
  3. There is no mouse cursor, which means that mouse properties, such as mouse hover properties, are impossible. You may be able to find some workarounds for this, but it will be difficult to get to your users how to work.
  4. The scroll bar does not work as expected. The scroll bar cannot display content that contains too many partitions. The frame also has issues with height and width. In addition, a two-finger gesture is required during scrolling. (We will discuss fully below)
  5. Does not support CSS fixed layout HTML element position:fixed CSS property cannot be displayed correctly, often makes the page stay on the first screen, unable to page down and zoom in Zoom out.

iPad user detection: User Agent (User Agent)

With the popularization of Internet access on mobile devices, many websites will perform client browser type detection, mainly It is identified by the User Agent. If it is detected that it is a mobile phone browsing, it may be redirected to allow the user to browse the mobile device-specific version. In the past, the mobile devices we referred to were mainly mobile phones and other terminals. Now, the iPad has also joined the ranks of mobile terminal devices, but it has a 9.7″ large screen. The iPad’s Safari browser brings a browsing experience close to that of a PC computer. Therefore, the website page corresponding to the iPad must be different from other mobile devices, and the difference between the iPad access mainly depends on the User Agent of the browser.

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

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version /4.0.4 Mobile/7B334b Safari/531.21.10

The User Agent code of iPad Safari contains the words: “Mobile”, “iPad”, but does not contain the word: “iPhone”. This must be noted, If the previous version of the website did not distinguish between mobile device access, now it needs to be modified to prevent the wrong version from being returned to the corresponding device.

Imitate the iPad browser access method >

If you can’t test the webpage through the iPad or iPhone simulator, you can still test it in the following ways:

  1. Browse through the Mac OS X or Windows version of Safari The device acts as an emulator Safari menu -> Preferences -> Advanced -> Select Show “Development Menu” in the menu bar, this is the menu item “Development” will appear in the menu bar. Menu “Development” -> User Agent -> Other , Paste the above User Agent code in the pop-up dialog box, click OK, you can use Safari to verify whether the page is suitable for iPad display.
  2. Use Google Chrome as an emulator and enter the command line: 
    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"
  3. 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"; }}
  4. PHP script to detect User Agent 
    if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPad')) {header('Location: http://ipad.www.opensoce.com');exit();}
  5. Apache detects redirection 
    RewriteCond %{HTTP_USER_AGENT} ^iPad　　RewriteRule ^index\..*$ ipad.html [L]　　RewriteCond %{HTTP_USER_AGENT} ^iPhone　　RewriteRule ^index\..*$ iphone.html [L]
  6. Nginx detection Test direction 
    if ($http_user_agent ~*iPad) {proxy_pass http://ipad.www.opensoce.com;}if ($http_user_agent ~*iPhone) {proxy_pass http:// iphone.www.opensoce.com;}

Using W3C standard website technology

iPad and iPhone’s Safari browser does not support plug-ins and Flash.

The menu, navigation, etc. using plug-in technology (controls) will not be displayed in the browser of the iPad or iPhone.

The audio and video implanted by the plug-in will not be played. You can publish the audio and video content in the

In the past, you may need plug-ins to display animation content, and you can directly use the features of Javascript+CSS3 in the iPad and iPhone browsers. Make an animation. CSS3 began to develop in the direction of modularity, such as box models, list modules, backgrounds and borders, and so on. With CSS3, you can directly make rounded corner tables, which could only be achieved with pictures or VML technology before.

As for HTML5 and CSS3, the relatively early and successful application in China is NetEase’s three major mailboxes ((mail.163.com; mail.126.com; www.yeah.net), you are on the iPad When you enter the above address on the above address, you will be redirected to the iPad-compatible version, and the user feels very good. HTML5 has many advantages in standardization and speed. According to the data provided by NetEase, the speed of receiving letters and writing letters in this version is improved. 50%. In addition, another advantage is that the reduction in code size greatly improves the processing and operating efficiency of the mailbox server, and provides a more powerful platform for future function expansion.

The future and goals of HTML5/CSS3 It is to improve everyone’s web experience. An introduction to HTML5/CSS3:

 * Use CSS3 gradients, font shadows, round boxes to borders-these are very simple and simple to the menu bar This is especially useful for website designers. * If you want to display videos, use HTML5 video player instead of Flash (obviously it won’t work). * Use HTML5 to create offline programs and store data offline. * Various practical tutorials are everywhere Yes, I used them when I was developing my iPad network program. Google and them got creative.

Using ordinary computer Safari to test the plug-in support situation, in Preferences->Security->, cancel the checkbox to enable the plug-in,

Set the viewpoint

Viewpoint can be understood as: window, viewable area, relative to the iPad hardware limited window The iPad window size cannot be changed, but the viewpoint window size can be adjusted.

If the window label setting is specified in the iPhone development, the necessary correction must be made in the iPad development. For example:

p>

In the iPhone, we will use the following code to specify the screen width

In iPad, device-width must be used instead of specific width pixels.

We While setting the width, you can set the zoomable scale range

Touch interaction

The external hardware keyboard is only an option for the iPad, and the touch screen keyboard is the main interactive tool for the iPad. When the user clicks the text box, the soft keyboard will automatically pop up, for example, when the user clicks or