This article is a summary of webAPP development skills. It is also a beginner’s tutorial for some webAPP developers.
At the same time, it is also 25 school xiaobian organized 34 practical webAPP development skills knowledge sharing.
Review images
1. Use meta tags
First let’s take a look at some of the private meta tags in the WebKit kernel that play an important role in developing WebApps. CSS3 Media Query for WebAPP and Mobile Website making Tutorial
Copy the codeThe first meta tag says: Enforce a 1:1 document width to the width of the device, a maximum document width ratio of 1.0, and don’t allow users to click on the screen to zoom in. User-scalable defines whether or not the page is scalable (0 means no scaling) so that the size is fixed on the device. Min-width, body{min-width: 300px; max-width: 100%; })
Safari on iOS 7.1 added a minimal UI attribute to the meta tag to hide the address bar and navigation bar during page loading.
The second meta tag is safari’s private meta tag on ios devices (not just iphones), which says: Allow full-screen browsing and enable support for Web AApps. ;
The third meta tag is also private to ios. It specifies the color of the top status bar on ios devices in the Web App state. The default value is default (white), and can be black or black-always (translucent grey). A “black-always” always takes up px on the page, always floating at the top (covering 20px – 40px on iphone4 and itouch4 Retina screens).
The fourth meta tag is: disable the phone function for numbers while browsing the web on the device (different devices explain different, itouch click number to save contact, iPhone click number to make a call), ignoring the number in the page as a phone number. If the phone function needs to be enabled, just set telephone=yes, and the specific Call format can be written in the code Call Me. If there are Google Maps on the page, the links of iTunes and YouTube will open the corresponding program components on ios devices.
2. Use of HTML5 tags
At the beginning of writing WebApp, I suggested front-end engineers to use HTML5 instead of HTML4, because HTML5 can achieve some rich WEB application experience that HTML4 cannot achieve, and can reduce the workload of developers. Of course, before you decide to use HTML5, you must be very familiar with it. Be aware of HTML5’s new tags. For example, you can define a piece of content or article area using the section tag, you can define navigation bars or tabs using the NAV tag, and so on.
3. Discard the CSS float property
If you come across a visual layout that displays the contents in a sequence (see below), I recommend abandoning float and using display:block instead.
4. Use the CSS3 border background attribute
This button has rounded corners, inner glow, and highlights, which cannot be written using CSS3. Of course, rounded corners can be written using CSS3, but highlights and inner glow cannot be written using CSS3. You can use -webkit-border-image to define the style of this button. -webkit-border-image is a very complex style property.
5. Block level A label
Please ensure that each piece of data is placed in an A tag. Why do you do this? In order to improve user experience on touch mobile phones, the clickable area of users should be as large as possible.
6. Adaptive layout mode
When writing CSS, I don’t recommend that front-end engineers fix the width of containers (either outer or inner). In order to adapt to various handheld devices, I recommend the front end engineers to use the adaptive layout mode (Alipay uses the adaptive layout mode), because this allows your page to display properly on iPad, itouch, iPod, iPhone, Android, Web Safarik and Chrome. You don’t have to worry about the resolution of the device again.
7. Learn to use WebKit-Box
In the last video, we talked about adaptive layout patterns, and some of you might be wondering, how do you do that on a mobile device? Thanks to WebKit for providing a WebKit-box value for the display attribute, it can help front-end engineers achieve flexible control of the box model.
8. How to remove the recognition of email address in Android platform
Those of you who have seen the iOS WebApp API know that iOS provides a meta tag that disables iOS automatic recognition of phone numbers in pages. IOS doesn’t automatically recognize the email address, but on Android, it automatically detects the email address, and when the user touches the email address, Android will pop up a box asking the user to send the email, and if you don’t want the email address to be recognized automatically, You might want to add a meta tag like 1 in the head
9, how to remove iOS and Android input URL control bar
Your boss or PD or interaction designer might ask you: Can we make our WebApp more like NativeApp, I don’t want the user to see that url control bar?
The answer is yes. 1 setTimeout(scrollTo,0,0,0);
Note that this code must be in window.onload for it to work properly, and that the height of your current document must be higher than the height of the window for this code to work.
10. How to prohibit users from rotating the device
I also wanted to forbid users from rotating the device, and I also wanted some clients to work only in portrait mode or landscape mode. But NOW I can responsibly tell you: Forget it! You can’t do that in webKit mobile!
At least the Apple WebApp API says: In order to enable users to browse the web properly in Safari, we must ensure that Safari can display the web content normally when the user’s device is in any position (i.e., adaptive), so we forbid developers to block the browser’s orientationchange event. It looks like Apple’s heart is in the right place. Apple is not just any apple.
IOS already forbids developers from blocking orientationchange events, but what about Android? Sorry, I haven’t found anything that says Android forbids developers from blocking browser orientationchange events, but on Android, you can’t.
Review images
11. How to detect whether the user launches your WebApp from the home screen
Those of you who have seen Apple’s webapp API know that iOS provides a feature for safari to add the current page to the home screen. You can add the current page to the home screen by pressing the small plus sign on the bottom tool of iphoneipodipod touch or the small plus sign on the top left of iPad. A startup icon of the current page will be automatically added on the home screen of the device. Click the startup icon to quickly and conveniently start your WebApp. The biggest difference between launching your WebApp from the home screen and accessing your WebApp from the browser is that it clears the toolbar at the top and bottom of the browser, so that your WebApp is more like nativeApp. Another difference is the standalone property of the Navigator child in the Window object. On iOS, navigator. Standalone is false when the browser accesses the site directly, true when the WebApp is launched from the home screen, We can use the navigator.standalone property to tell if the user is currently accessing our Webapp from the home screen. There is no such thing as adding to the home screen in Android!
12. How to turn off automatic keyboard capitalization in iOS
We know that in iOS, when the virtual keyboard pops up, by default the keyboard is capitalized, and depending on some business scenarios, you might want to turn that off. The mobile version of WebKit provides an autocapitalize attribute for the input element, Turn off the keyboard default capitalize by specifying autocapitalize= ‘off’.
13. How to completely prohibit users from opening pages in new Windows in iOS
Sometimes we might want to disable the user from opening the page in a new window, we can use target= “_self” on the A TAB to specify that the user opens the page in a new window, or we can leave the target property blank, but you’ll notice that iOS users will pop up a list button after holding down the link for 3 seconds, The user can still open the page in a new window with these buttons, so the developer-specified target attribute is disabled, but iOS can disable these buttons by specifying the -webkit-touch-callout style attribute of the current element to None. This trick is only available on iOS but not on Android.
14. How to prohibit users from saving pictures \ copying pictures in iOS
We mentioned in tip 13 that the -webkit-touch-callout attribute for the element, and specifying -webkit-touch-callout to None for an IMG tag also prevents the device from popping up the list button so that the user can’t save/copy your image.
15. How to prohibit users from selecting text in iOS
We can disable iOS users from selecting text by specifying the -webkit-user-select attribute of the text tag to None.
16. How to get the scroll bar value in iOS
The desktop browser gets the value of the scroll bar through Document. scrollTop and Document. scrollLeft, but in iOS you’ll find that these two properties are undefined. Why? In iOS, there is no concept of scrollbar. In Android, the value of scrollbar can be obtained by using these two properties. So how do we get the value of scrollbar in iOS? Using window.scrollY and window.scrollX we can get the value of the y and x scroll bars of the current window.
17. How to solve box frame overflow
When you specify a block-level element and define a border for it, set its width to 100%. In mobile device development, we usually define text fields to be 100% wide and block-level elements to achieve full-screen adaptive styling, but you will find that one pixel on each side of the element will overflow the document, resulting in horizontal scroll bars. To solve this problem, We can add a special style to it — webkit-box-sizing:border-box; Used to specify the size of the box including the width of the border.
18. How to solve the problem of rounded corners in Android 2.0 or below
If you are careful enough, when doing WAP site development, you should find android 2.0 platform in particular many problems, such as rounded corners this problem. In order to be fully compatible with Android 2.0 and below, we must use the following techniques to define rounded edges for an element: 1 \ -Webkit prefix must be added (on iOS, you don’t have to add it, but on Android, you must); 2 \ If the style is defined for the border, such as border:1px solid #000; The -webkit-border-radius attribute must appear after the border attribute. 3 \ If we have such visual elements, the top left and top right corners are rounded, we must first define the global (4 corners rounded) -webkit-border-radius :5px; -webkit-border-bottom-left-radius:0; -webkit-border-bottom-radius :0; -webkit- border-bottom-right-border:0; Otherwise, on platforms below Android 2.0, all right-angles will be displayed, and remember! – Webkit this prefix must be added!
19. How to solve the problem of page adaptation in Android platform
Although your HTML and CSS are completely adaptive, if you find that your page is not adaptive on Android, first check whether your head tag contains the following meta tags: 1 if yes, please check carefully to see if there is a value of this attribute width=device-width, if not, please add it immediately.
The new iOS system is version 4.3, which causes a bug to Safari: Even if you add the following meta tag, Safari will automatically recognize the 5 consecutive digits in the page and restyle them, meaning that your CSS will not apply to the tag. 1
We can do this the dirty way. For example, in the waP site of Alipay, we have rewritten the label showing the amount as follows: 1 95009.00
Review images
21, how to detect iOS4, iOS5 or iOS6? The Retina display is definitely one of the most eye-catching innovations of the iPhone 4. It’s the retina display that gives the iPhone 4 640×960 Pixels resolution, though it still uses 320×480 points for downward compatibility. That is, it takes four pixels to show one pixel of a normal image without scaling. In retina images, each pixel corresponds to a pixel in the image.
That way, old apps can run on the iPhone 4 without modification — they look a little worse, but they don’t have content just in the upper-left quarter.
There are many new changes in iOS 6, such as smart App banner, the new iPhone screen is 16:9 instead of 3:2, the resolution is 640 × 1136 instead of 640px × 960, and the DPI is still 326. Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0
However, this method cannot tell whether the iPhone is upgraded to iOS 6 or the latest original iPhone 5. Here, wE use javascript or the Media Queries feature of CSS3 to distinguish.
On the Web, the pixel to point ratio is called device-Pixel-ratio, which is 1 on most devices, 2 on the iPhone 4, and 1.5 on some Android models.
So – webkit-min-device-Pixel-ratio :2 can be used to distinguish iPhone (4/4s/5) from other phones
The iPhone 4/4S has 640*960 pixels resolution, a DPI of 326, and a device height of 480px
The iPhone5’s resolution is 640 × 1136 pixels, the DPI is 326, and the device height is 568px
So we can distinguish iPhone4 from iPhone5 by determining the device-height value of iPhone
/* isPhone4inches = (window.screen.height==568); */ @media (device-height:480px) and (-webkit-min-device-pixel ratio:2){/* compatible with iphone4/4s */. Class {}} @media (device-height:480px) and (-webkit-min-device-pixel ratio:2){/* compatible with iphone4/4s */ (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* compatible with iphone5 or iPod Touch 5th generation*/. Class {}}
Second, link to a separate stylesheet and put the following code in the tag
Use JS
IsPhone4inches = (window.screen.height==480); // isPhone4inches = (window.screen.height==480); isPhone5inches = (window.screen.height==568);
22. How to add a Web App to the home screen
If you used the apple-mobile-web-app-capable meta tag to add web pages to the home screen, this method only works on the iPhone’s 3.5 “screen, and the iPhone 5 is a bit more pathetic, with a black strip at the top and top of the page. Even if you provide a large boot screen (640 by 1096), the iPhone 5 will compress it down to 640 by 920.
Solutions for iOS6:
You need to discard the viewport property you used before width=device-width or width=320. If you do not specify viewport, it will display normally:
Alternatively, you can specify a width that is not 320:
If you don’t want to affect safari before iPhone 4S, you can also set viewPort dynamically with JS:
If (window.screen.height==568) {// iPhone 4 “document.querySelector(” meta[name= viewPort]”).content= “width=320.1”; }
For splash screens, you can use Media Query to adjust:
23. How to set the default title of webApp’s home screen?
IOS6 can use meta tags to assign titles to webapps on the home screen:
24, iOS6 file upload restrictions
IOS6 introduces HTML5 file upload apis that support single file/multiple file uploads. However, due to the resource management mechanism of iOS, you can only upload photos and videos, not other files, and the getUserMedia API (Camera API) is not supported.
25. Smart App Banner for iOS ads
If your website also offers apps in the iTunes App Store, you can use a simple meta tag to prompt users to download and install your native app(or hybrid app) :
ITunes Affiliate Program is also supported:
Note that the app banner occupies 156px height — the high score screen is 312px.
26, the range of the Filter
– Webkit-filter is a cSS3 filter attribute. Webkit is the first to support these functions. For details, see – Webkit-filter?
http://www.qianduan.net/what-is-webkit-filter.html
27. Safari Full Screen This is great. In landscape mode, click the Icon in the lower right corner of Safari to go full screen. Something like Mac OS X’s full-screen approach, with the drawback that only landscape scenes are supported.
28, the Animation Timing API, this is very useful for game developers to access the Animation details Timing API (http://www.w3.org/TR/animation-timing/), This tutorial can also look at Paul Irish http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/.
29, CSS image set to consider the user to save traffic, iOS6 this property is very useful. You can specify multiple specific images for the CSS selector to distinguish between high-score and non-high-score screens:
-webkit-image-set(url(low.png) 1x, url(hi.jpg) 2x)
Properties like background-image can be supported.
This is a WebKit private property and is not supported by other browsers. Hopefully OS X will support this as well, so that background-size is no longer needed to differentiate retina screens.
CSS 3 Cross-fade
IOS 6 supports some of the latest CSS3 Image Values standards, including cross-fade. This allows us to use multiple images in the same selector to achieve translucency or animation:
Background – image: – its – cross – fade (url (” logo1. PNG “), the url (” logo2. PNG “), 50%);
Review images
31, Web View update:
Note that javascript in WebView is 3.3 times slower than Safari in Nitro.
Well, the hybrid model is webApp wrapped in WebView components, and third-party development tools like PhoneGap are just like that.
IOS 6 supports Safari and WebView synchronization. Debugging WebApp or Hybrid App as on PC is undoubtedly a great convenience for front-end developers. The method is simple:
Open The Web Inspector (Settings — > Safari — > Advanced). Second, connect the phone to the third PC, open Safari on the PC, and go to “Development” to see the device. Click to debug.
33, Link tag apple-touch-icon
By setting the appropriate Apple-touch-icon TAB, ICONS added to the home screen will use images of the size we specify. Here’s how to set it up for ios devices.
(the default size is 60px for the iPhone, 76px for the ipad1, and twice the size for the retina display.)
The priority of icon search is as follows:
If there is no icon that matches the recommended size of the device, the icon that is larger than the recommended size but closest to the recommended size is preferred.
If there is no icon larger than the recommended size, the icon closest to the recommended size is preferred.
If more than one icon fits the recommended size, an icon containing the keyword precomposed is preferred.
If you do not specify the icon with the link tag in the area, the site will automatically search for apple-touch-icon in the root directory… Or apple – touch – icon – precomposed… Prefix icon.
Note: ios7 no longer adds special effects for icon (rounded corners and highlighted), ios7 used to add special effects for icon by default, if you don’t want to add special effects for icon, you can replace apple-touch-icon. PNG with apple-touch-icon-precomposite.png
34, apple – touch – startup – image
Apple-touch-startup-image is used to set a startup screen similar to NativeApp for WebApp. Use method:
However, unlike Apple-touch-Icon, Apple-Mobile-Web-app-capable does not support sizes, so media is used to control the loading of different splash screens for flat screen, Retina screen, and vertical screen.
