WebApp Development Experience Summary

WebApp development of the major trend, I collected a write about the development of WebApp experience, welcome everyone to add.

About Link

rel="apple-touch-startup-image" href="images/start.jpg"/>

Represents a picture that is displayed when a site is loaded during a click on a shortcut icon that is generated in the home screen. This feature has a good user experience. Avoid the white screen when loading, reduce the user wait for the site loading process of boredom. The flaw is currently only support vertical screen browsing mode, horizontal screen browsing is not supported.

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

These three items are different home screen icons that are customized for different versions. Of course not defined can also, when you click on the Home screen, will be the current screen as an icon. The apple-touch-icon icon that represents this is the auto-heightening light icon button. It corresponds to the apple-touch-icon-precomposed . The original design does not heighten the light effect of the icon. According to the actual project situation, choose to use.

You can also use media to control the loading of different screens:

Iphone<linkhref="Apple-touch-startup-image-320x460.png"Media="(device-width:320px)"Rel="Apple-touch-startup-image"/>//iPhone Retina<linkhref="Apple-touch-startup-image-640x920.png"Media="(device-width:320px) and (-webkit-device-pixel-ratio:2)"Rel="Apple-touch-startup-image"/>//IPhone5<linkRel="Apple-touch-startup-image"Media="(device-width:320px) and (device-height:568px) and (-webkit-device-pixel-ratio:2)"href="Apple-touch-startup-image-640x1096.png" >//iPad Portrait<linkhref="Apple-touch-startup-image-768x1004.png"Media="(device-width:768px) and (orientation:portrait)"Rel="Apple-touch-startup-image"/>//iPad Landscape<linkhref="Apple-touch-startup-image-748x1024.png"media= "(device-width:768px) and (Orientation:landscape)" rel=" Apple-touch-startup-image "/>//iPad Retina portrait<link href=" apple-touch-startup-image-1536x2008.png "media=< Span class= "string" > "(device-width:1536px) and (orientation:portrait) and (-webkit-device-pixel-ratio:2)" rel= "Apple-touch-startup-image"/>//iPad Retina landscape<link href=" apple-touch-startup-image-1496x2048.png "media=< Span class= "string" "(device-width:1536px) and (Orientation:landscape) and (-webkit-device-pixel-ratio:2)" rel=     

About Media queries

rel="stylesheet" media="screen and (orientation:portrait) and (min-width:960px)" href="style.css" />

Common device types:

• All: All devices
• Screen: computer monitor
• Handheld: Portable Devices
• Print: printing paper or print preview
• Projection: various photographic equipment
• TV: Television type of equipment

Common equipment Features:

• Width: viewport widths
• Height: Viewport Height
• Device-width: Width of the device screen
• Device-height: Height of the device screen
• Orientation: Detect whether the screen is in a horizontal or vertical screen, portrait|landscape
• Aspect-ratio: Width-to-height ratio based on viewport
• Device-aspect-ratio: Width-to-height ratio based on device screen
• Color: The number of colors, such as whether the min-color:32 matches a device with 32-bit or more colors
• Color-index: Number of colors in the Color index table of the device
• Monochrome: Detects the number of bits per pixel used in a monochrome oscillator buffer. is non-negative, such as Monochrome:3
• Resolution: Detects the resolution of the screen or printer, such as MIN-RESOLUTION:300DPI (described later in DPI) or a measure of pixels per centimeter, such as MIN-RESOLUTION:120DPCM
• Scan: Scanning mode with a value of progressive (progressive scan), interlace (interlaced scanning)
• Grid: Detecting whether the output device is a grid device or a bitmap device

When you create a media query, the above features (scan and grid not) can be combined with the Min and Max prefixes to create a range of media queries.

DPI, which represents the number of pixels (pixel) per inch, the higher the value, the more dense the display can display the image. When reaching the limit resolution of the human eye, the amid master gave it a very high-end name--retina. From the iphone4 era has been the retina screen. The screen sizes and densities of Android phones are: small, medium, large, oversized, ldpi (low), MDPI (Medium), hdpi (High), xhdpi (superelevation). At present, the Android mobile phone high split screen and ultra-split screen is already mainstream. According to the screen resolution Division:

/*中分辨率屏幕*/@media (-webkit-min-device-pixl-ratio: 1){    //css代码}/*高分辨率屏幕*/@media (-webkit-min-device-pixl-ratio: 1.5){ //css代码}/*超高分辨率屏幕（传说中的Retina屏）*/@media (-webkit-min-device-pixl-ratio: 2){ //css代码}

Of course we can also use some of the features previously provided, as follows:

@media screen and (max-width: 768){    //css代码}

About META

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

The above code indicates that the width is the width of the device, does not scale by default, does not allow user scaling (that is, suppresses scaling), hides the address bar and navigation bar (ios7.1 new) when the page loads.

// [pixel_value | device-height] viewport 的宽度，范围从 200 到 10,000，默认为 980 像素height – // [pixel_value | device-width ] viewport 的高度，范围从 223 到 10,000 initial-scale – // float_value，初始的缩放比例 （范围从 > 0 到 10）minimum-scale – // float_value，允许用户缩放到的最小比例maximum-scale – // float_value，允许用户缩放到的最大比例user-scalable – // [yes | no] 用户是否可以手动缩放target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 目标屏幕像素密度

Apple-mobile-web-app-capable

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

Whether the WebApp feature is started will remove the default Apple toolbar and menu bar.

Apple-mobile-web-app-status-bar-style

name="apple-mobile-web-app-status-bar-style" content="black" />

When you start the WebApp feature, the color of the phone signal, time, and the top navigation bar of the battery is displayed. Defaults are default (white), which can be set to Black (dark) and black-translucent (gray translucent). This is mainly based on the actual page design of the main color for collocation to set.

Telephone & Email

name="format-detection" content="telphone=no, email=no" />

Ignore phone number recognition and mailbox recognition.

Other meta

<!--fast mode with 360 browser enabled (WebKit)--<MetaName="Renderer"Content="WebKit" ><!--prevent IE from using compatibility mode--<Metahttp-equiv="X-ua-compatible"Content="Ie=edge" ><!--optimized for handheld devices, mainly for older browsers that do not recognize viewport, such as BlackBerry--and<MetaName="Handheldfriendly"Content="True" ><!--Microsoft's Vintage browser--<MetaName="Mobileoptimized"Content=">"<!--UC Force vertical screen--<MetaName="Screen-orientation"Content="Portrait" ><!--QQ Forced vertical screen--<MetaName="X5-orientation"Content="Portrait" ><!--UC Mandatory fullscreen--<MetaName="Full-screen"Content="Yes" ><!--QQ Mandatory fullscreen--<MetaName="X5-fullscreen"Content="True" ><!--UC Application Mode--<MetaName="Browsermode"Content="Application" ><!--QQ Application Mode--<MetaName="X5-page-mode"Content="App" ><!--this meta function is to delete the default Apple toolbar and menu bar--<MetaName="Apple-mobile-web-app-capable"Content="Yes" ><!--Web site to enable support for Web apps--<MetaName="Apple-touch-fullscreen"Content="Yes" ><!--mobile phone number is not displayed as a dial-up link--<MetaName="Format-detection"content="Telephone=no" ><!--the color of the status bar (top bar of the screen) in Web Apps--<meta name=" Apple-mobile-web-app-status-bar-style " content=" BLACK "><!--windows Phone Click No Highlight--< meta name= "msapplication-tap-highlight" content="No" ><!--Mobile Web page automatically detects phone numbers-- ><meta http-equiv= "x-rim-auto-match" content="None" >   

Some tricks

• -webkit-tap-highlight-color:rgba(255,255,255,0)You can also mask the shadows that appear when you click an element under iOS and Android. Note: The transparent property value is not valid under Android.
• -webkit-appearance:noneYou can also mask the weird inner shadow of the input box.
• -webkit-transform:translate3d(0, 0, 0)With iOS you can make the animation smoother (this property calls Hardware acceleration mode), but not in Android, a lot of unseen bug is because of this.
• -webkit-background-sizeCan do high-definition icons, but some of the lower version of Android can only recognize Background-size, so it is necessary to write two, it is recommended to use this property cover this value, you can automatically go to match width and height.
• text-shadowWith this attribute, you can beautify the text effect.
• Android, iOS4 and below, fixed-width/blocks-level elements of the overflow:scroll/auto failure, the browser is a bug, can be implemented with third-party tools.
• ios5+ can be scrollTo(0,0) moved by moving the hidden browser address bar.
• CSS3 animations affect your autofocus, so auto-focus should be done before the animation is executed, or discarded directly.
• When using Iscroll, you cannot use: focus{outline:0} pseudo-class, otherwise slide the card.
• WebKit automatically adjusts the font size when the page is rendered, such as when the screen is switched. -webkit-text-size-adjust:none, but if it is set to none, it will cause the page zoom function not to be used, the best way is: -webkit-text-size-adjust:100% .
• Prevents users from selecting page text: -webkit-user-select: none .
• Disable link pop-up window: -webkit-touch-callout:none .

About the Transition splash screen solution:

-webkit-transform-style: preserve-3d;/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/-webkit-backface-visibility:hidden;/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/

 

WebApp Development Experience Summary