Mobile Web page Header writing

HTTP header information (HTTP-EQUIV) and page description information (name)

HTTP-EQUIV:
The enumeration's property definitions, which can alter the compilation of server and user agent behavior. The compiled value takes the contents of the content. In simple terms, the HTTP protocol response header can be simulated.
The most common is probably content-type, which sets the encoding type. Such as

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

The H5 can be simplified to

<meta charset="utf-8">

Http-equiv Common There are other as follows (reasonable use can increase SEO included).

Content-Language : 设置网页语言Refresh : 指定时间刷新页面set-cookie : 设定页面 cookie 过期时间last-modified : 页面最后生成时间expires : 设置 cache 过期时间cache-control : 设置文档的缓存机制...

Name
This property defines the name of the document-level metadata. For the content of the Web page, convenient search engine to find categories, such as keywords, description; You can also use browser maker-customized meta, such as viewport;

viewport The definition of the viewable area, such as screen scaling.

Tells the browser how to standardize the rendered Web page.

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,  user-scalable=0;" name="viewport" />

This meta tag indicates that the width of the document is forced to remain 1:1 with the width of the device, and that the maximum width of the document is 1.0, and that the user is not allowed to click on the screen to zoom in, or to set the user to zoom User-scalable=yes; However, the mobile browser (UC) still does not scale.

// [pixel_value | device-width] viewport 的宽度，范围从 200 到 10,000，默认为 980 像素height – // [pixel_value | device-height ] 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] 目标屏幕像素密度

format-detection Identification of phone numbers && email to email

<meta content="telephone=no" name="format-detection" />

Meta tag means: Tell the device to ignore numbers in the page as a phone number

<meta name="format-detection" content="email=no" />

Allow Write:

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

no-cache Cache control

<meta http-equiv="Cache-Control" content="no-cache"/>

Without this, the WAP browser will simply display a copy of the document in the cache without having to connect to the server each time it is refreshed. Some WAP browsers do not support using <meta/> tags to control caching, but they do know the meaning of the HTTP header "Cache-control:no-cache". In this case, the solution is to set the HTTP header in the server-side HTTP response.

iOS private properties

apple-mobile-web-app-capable Enable WebApp mode, the toolbars and menu bars are hidden, and other mates are used.

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

The META tag is the safari private meta tag in the iphone device, which says: Allow full screen mode to browse;

apple-mobile-web-app-status-bar-style in webapp mode, change the color of the top status bar.

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

The META tag is also the iphone's private label, which specifies the style of the iphone's status bar on the top of Safari, Default (White, defaults) | Black | Black-translucent (Translucent)

apple-touch-startup-image under WebApp, set the interface at the start time;

<link rel="apple-touch-startup-image" href="/startup.png" />

The Size property is not supported and can be controlled using media query. On iphone and touch, the image size must be 230*480 px, only support vertical screen;

Apple-touch-icon Under WebApp, specify the path of the icon file on the home screen;

<LinkRel="Apple-touch-icon"href="Touch-icon-iphone.png" ><Linkrel= "Apple-touch-icon" sizes = "76x76" href= " Touch-icon-ipad.png "><link  Rel= "Apple-touch-icon" sizes= " 120x120 "href=" touch-icon-iphone-retina.png "><link rel= " Apple-touch-icon "sizes=" 152x152 " href= "touch-icon-ipad-retina.png";      

The default iphone size is 60px, the ipad is 76px, and the retina screen is multiplied by 2;
In the absence of a uniform size icon, preference is given to the icon that is larger than the recommended size, but closest to the recommended size.
iOS7 previously the system will add special effects (fillets and highlights) to the icon, if you do not want the system to add effects, you can use apple-touch-icon-precomposed.png instead of apple-touch-icon.png

Other meta

<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 App mode--<meta name= "Browsermode"  content="Application" ><!--QQ App mode--<meta name="X5-page-mode" content="app" ><! --Windows Phone Click No Highlight-<meta name="msapplication-tap-highlight" content="No" >                   

Window size

In order to solve the problem of screen resolution size of mobile Safari, Apple specifically defines the Viewport virtual window, which is primarily intended to allow developers to create a virtual window and customize the size scaling capabilities of their windows.

If the developer does not define this simulation window, the Mobile Safari Virtual window has a default size of 980 pixels. Now, in addition to the Safari browser, other browsers also support viewport virtual Windows. However, the default size support for viewport Windows is inconsistent for different browsers.

Virtual window (layout viewport)
By default, the mobile browser sets the viewport to a relatively wide value (preventing it from being too narrow and showing confusion in the viewable area). The default viewport is called Layout viewport.
Width can be obtained by Js (basic all devices are supported)

document.documentElement.clientWidthdocument.documentElement.clientHeight

Visual window (visual viewport)
The browser viewable area size. Can be understood as a mobile physical screen.
Width can be obtained by Js (not supported by Android2, Opera Mini, UC8)

window.innerWidthwindow.innerHeight

Ideal Viewport
A concept proposed by Peter-paul Koch, a perfect fit for a mobile device viewport. The ideal state is that you do not need the user zoom and the horizontal scroll bar to be able to view normally, the display text size is suitable, does not distinguish the resolution, the screen density and so on.

Meta viewport
The mobile side uses layout viewport by default, and if we want to achieve the same effect as ideal viewport, we can control the viewport with meta tags.

Web Development Notes

To develop a touchscreen you need to touch the event, and the hover event fails, replacing the Click event with a tap event.
For screens with different resolutions, you typically use a twice-pixel picture.
Mobile device support for Web Storage is ideal.

Touch Touch Events

Touchstart the start event when the finger is placed on a DOM element
Touchmove trigger event when dragging a DOM element with a finger
Touchend triggers an event when the finger moves away from a DOM element
In addition to the standard touch events described above, Senchatouch has also customized a number of events, respectively, as follows:
TOUCHDOWM Trigger event when the phone touches the screen
DragStart triggering events before dragging DOM elements
Drag trigger event when dragging DOM elements
Dragend triggering events after dragging DOM elements
Singletap and Tap event types
Tap fingers touch the screen and quickly leave the screen
Doubletap the event when a finger is placed on a DOM element twice in succession
Taphold Touch and hold for a period of time to trigger an event
Tapcancle Touch Interrupt Event
Swipe trigger event when sliding
Pinch trigger event when pinching a DOM element by finger
Pinchstart Finger Press to pinch a DOM element before triggering an event
Pinchend finger presses a DOM element to trigger an event

Screen size adaptation CSS file

<link rel=‘stylesheet‘ media=‘screen and(max-width:600px)‘ href=‘small.css‘/>

Within the Small.css style file, you need to define the style of the media type, for example:

@media screen  and (max-width:600px){    .demo{ background-color:#ccc; }}

The style file is applied when the width of the screen viewable area is between 600px and 900px. Import the CSS file as follows:

<link rel=‘stylesheet‘ media=‘screen and(min-width:600px)and(max-width:900px)‘href=‘small.css‘></link>

The corresponding wording in the Small.css style file is as follows:

@media screen and（min-width:600px）and(max-width:900px){.demo{ …… }}

This style file is applied when the file's maximum screen is 480 pixels away. Import the CSS file as follows:

<link rel=‘stylesheet‘ media=‘screen and(max-device-width:480px)‘ href=‘small.css‘></link>

The corresponding wording in the Small.css style file is as follows:

@media screen and(max-device-width:480px){    .demo{ background-color:#ccc; }}

Adapting files to directions

<link rel=‘stylesheet‘ media =‘all and(orientation:portrait)‘ href=‘portrait.css‘/><link rel=‘stylesheet‘ media=‘all and(orientation:landscape)‘ href=‘landscape.css‘/>

Media query syntax

@media [media_query] media_type and media_feature

You must start with the ' @media ' mode when using the Media Queries style module. Media_query represents the query keyword, where the NOT keyword and the only keyword are used. The NOT keyword and the only keyword. The NOT keyword indicates that a reverse action is taken on the following style expression.

@media not screen  and (max-device-width:480px)

The only keyword is for browsers that do not support mediaqueries but can read the Media type type to ignore this style. For example, the following code:

@media only screen and (max-device-width:480px)

Import the media Queries style file and add the following media Queries style file module within the head element of the home page HTML file;

<link rel=‘stylesheet‘ type=‘text/css‘ media=‘only screen and(max-width:480px),only screen and (max-device-width)‘ href=‘/resources/style/device.css‘/>

Mobile Web page Header writing