What does ios6 bring to front-end webapps?

What does ios6 bring to front-end webapp developers? The first time you synchronize the updated experience 2012-09-20

Questions of science, science and progress...

On October 11, September 19, us time, September 20, China time, I updated to ios6. I didn't play Siri, Which is Mandarin in the first place, instead, I started to study and verify what convenience and benefits ios6 and its Safari have brought to webapp developers or front-end developers. Please note the time when this article was published. This article is the result of the first release of the human flesh experience test!

1. debug safari on your mobile phone through PC or Mac
With the advent of ios6, the current situation of Safari on mobile phones without debugging tools by developers has become history. Friends who are used to it can give up the days of simulating debugging with chrome.
To put it simply, ios6 allows you to debug safari pages on iOS devices through safari tools on PCs or Mac.
The procedure is as follows:
1> Update your iOS device to ios6, and then update the Safari browser on Mac or PC to the latest version.
2> open the iOS device, click "Settings" on the home screen, and then "safari". Then, scroll to the bottom of the screen to go to "advanced ", open the Web Checker (settings-> safari-> advanced), as shown in:

3> open safari on iOS devices, enter the address of the page to be debugged, and load the page
4> use a USB cable to link your iOS device to your computer and enable the updated safari on your Mac or PC.
5> select "development" in Safari on Mac or PC, select your iOS device, and select the page to debug on the right of the triangle, as shown in:

6> click the mouse to open the developer tool and debug the webpage on the iOS device, as shown in:

2. UI details change
By comparison with the naked eye, we find that some of these details have changed. Some of them need attention from developers, but others do not matter.
1> the top bar turns black background
2> there is a full screen button on the horizontal screen to view the webpage in full screen.
3> the words "Search" in the address bar are replaced with the words "Search ".
4> more options are available at the bottom of the Option Button (see figure ).
As shown in:

For more options in 4, see:

3. Newly supported CSS Filter features
Safari of ios6 finally supports css3 filters.CodeFinally available on iOS devices

1	-WebKit-Filter:****

4. added the prompt message "smart app Banner" for the native application corresponding to your website.
This kind of prompt advertisement will appear on your mobile web page. When a user opens your webpage on a mobile device, if your website submits a native app in the App Store, this banner will prompt the user to download or open it directly, as shown in:


You can add the following code to your website:

1	<Meta name = "apple-iTunes-app" content = "app-id = your app ID">

Note: After you add the user to the main screen

1	<Meta name = "apple-mobile-web-app-capable" content = "yes"/>

For full screen display, and then click the icon on the main screen to open your website, this app banner bar will not appear.

0

 

Original article: http://youyodf.sinaapp.com/archives/280

 

Author: Admin | category Directory: mobile Web applications | tags: API, ios6, Safari, webapp, and mobile phone debugging websites