End mobile development must know tips

Foreword

Recently wrote a hybrid app project in the company, the pages are all basically done with H5, embedded under native webview. Found a problem in the iPhone 6 status bar at the Apple phone will block the page and causes the page down, style confusion, finally online to find some solution, add a meta tag to solve the problem. Today's special to summarize common mobile terminal development requires attention to meta tags and some tips.

1. viewport

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

This is essential to develop mobile-side page of labels, used to adjust the layout viewport is consistent with the visual viewport, page zoom, etc. is prohibited.

1. apple-mobile-web-app-capable

apple-mobile-web-app-capable Is set up Web application is running in full-screen mode.

grammar:

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

Description:

If the content is set to yes, Web applications will run in full-screen mode, on the contrary, does not. The default value of content is no, indicate normal display. If you choose to run full-screen mode, Apple will remove the default toolbars and menu bar.

I have encountered is the problem begins by setting the meta tag to solve.

1. Set the color of the status bar at the top

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

Description:

This label works on the premise that must be turned on the full-screen mode webapp, namely Article II meta tags must be synchronized specified otherwise, this label does not work.

If the content is set to default, the status bar is normally displayed. If set to blank, the status bar will have a black background. If you set to blank-translucent, the black translucent status bar displays. If set to default, or blank, then the page is displayed below the status bar, the status bar that is occupied by the top portion, the bottom portion occupied by the page, or both without cover other blocked. If set to blank-translucent, the page will fill the screen, which cover the top of the page is a status bar (page overrides 20px height, and iphone4 and itouch4 the Retina screen 40px). The default value is the default.

1. webapp added to the title after the main screen (iOS 6 new)

<meta name="apple-mobile-web-app-title" content="title">

1. Setting Cache

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

Phone pages always be cached after the first load, then each refresh will use the cache rather than to re-send the request to the server. If you do not want to use the cache can be set up no-cache.

1. format-detection

format-detection enable or disable the automatic identification page number.

grammar:

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

Description:

By default, the device will automatically recognize any string that might be a phone number. Setting telephone = no to disable this feature.

1. html5 ios or android call dialing function

html5 provides automatic call dialing label, tel added as long as the href a tag: it.

Direct dial phone as follows:

<a href="tel:15677776767">点击拨打15677776767</a>

PS: If you encounter this situation fails, you can add a meta tag in the page header, content to yes.

1. Iphone and ipad at the input box that appears by default in the shadows.

Element{
  -webkit-appearance: none; 
}

1. Mobile end slide page absolutely positioned elements jitter

This problem yourself online to find some solutions for reference only.

• Body height set to 100%

body,html{
    widht:100%;
    height:100%; }

If the project has already done the page, there are other effects, directly set this property, it may affect other functions of the page.

If you use this method, the effect of poor local debugging is not recommended.

• Was added to an element fixedly positioned transform property

transform:translateZ(0);
or
transform:translate3d(0,0,0);

• A nest box outer

Adds another layer of the box, fixed fixedly positioned outer layer, inner layer disposed absolute positioning absolute;

<div style='position: fixed;'>
  <div style='position: absolute'> ... </div> </div>

1. input frame pointer for extended iphone

long input frame pointer input at iPhone, Android display properly.

method:

line-height style value lower input tag.

1. ios next page slide Caton, not smooth

Set on a rolling element css styles, and flexibility to achieve inertial scrolling effect appears in the content.

{
  -webkit-overflow-scrolling: touch;
}

-webkit-overflow-scrolling Whether the attribute control element scroll spring back effect on a mobile device, which has two values:

auto: Use ordinary rolling, when the finger is removed from the touch screen, scrolling stops immediately.

touch:
Use the scroll has a rebound effect when the finger is removed from the touch screen, content will continue scrolling effect for some time. Continue scrolling speed is proportional to the duration and intensity of scrolling and gesture. But also create a new stack context.

1. Fixedly positioned top of the page elements or bottom elements fixedly positioned shield part of the page content.

method one:

Div coupled to the outermost layer  padding-bottom, is fixed to the positioning element height;

Method Two:

Using pseudo-element, the outermost layer to add dummy div elements after, the height to the height of the fixed locating elements.

.wrapper::after{
  content: '';
  height: '固定定位元素高度'; }

1. Prohibited to copy, select the text

Element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none; }

1. IOS in the input keyboard events keyup, keydown, keypress support is not very good

Do fuzzy search with input search time, enter inside the keyboard keyword, queries via ajax background, and then return the data, then the data returned by the key words in red. After listening keyup events with input keyboard, mobile browser in Android is possible, but in red ios mobile browser is very slow, input by the input method, did not immediately keyup event corresponding to the respective only by deleting the following!

Solution:

It can be used to replace the oninput event html5 keyup

<input type="text" id="test">
<script type="text/javascript"> document.getElementById('test').addEventListener('input', function(e){ var value = e.target.value .... }) </script>

Keyup then achieve a similar effect!

1. webview lower portion of JavaScript code not executed, such as alert () and the like.

Solution:

webview just a carrier, requires the use of a variety of content rendering webviewChromClient to achieve, so a default set of class WebChromeClient base line.

PS: This section requires the assistance provided to develop a native base class WebChromeClient, Code:

WebView.setWebChromeClient()

1. Mobile end Click 300ms delay

300ms is acceptable, but because of problems arising 300ms, we must solve. 300ms the user experience is not very good, to solve this problem, we generally move side to replace the click event with a tap event.

It recommended two js, one  fastclick, one  tap.js.

Click on the moving end delay processing program, described in detail see: moving end delay processing scheme Click

1. Click end mobile penetration problem

Case are as follows:

<div id="haorooms">点透事件测试</div> <a href="http://www.baidu.com">百度</a>

div is absolutely positioned mask layer, and the z-index is higher than a. The label is a link to a page, we have to tap div binding events:

$('#haorooms').on('tap',function(){ $('#haorooms').hide() })

When we click on the layer mask div normal disappear, but when we click on the mask layer on a label, found a link is triggered, which is called the point through the event.

the reason:

touchstart earlier than touchend earlier than click. That click of the trigger is delayed, this time in about 300ms, which is after we tap trigger layer mask to hide, then click the trigger yet, after 300ms due to the layer mask to hide, we triggered the click to the following a link.

Solution:

1. Try to use the touch event to replace the click event. For example touchend event (recommendation).

2. With fastclick, details see above GitHub repository.

3. Prevent click a label with preventDefault.

4. Delayed by a certain time (300ms +) to handle the event (not recommended).

5. More generally can be resolved, it is impossible to replace the click event.

Here are some touchend event, as follows:

$("#haorooms").on("touchend", function (event) { event.preventDefault() })

1. iOS in English input Chinese input method, there may be a one-sixth of spaces between letters

Can be removed by regular

this.value = this.value.replace(/\u2006/g, '')

1. Resolved in iOS video tag video full-screen playback problems automatically

Add tags to video properties:

<!-- 针对 iOS8，9下生效  -->
<video webkit-playsinline="webkit-playsinline"></video> <!-- ios10 及以上 --> <video playsinline="playsinline"></video>

PS: If it is embedded within the next webview also need to develop native support of partners add the following codes:

webView.allowsInlineMediaPlayback = YES;

1. Click on the link to send mail mobile terminal

<a href="mailto:[email protected]?subject=TestObject">[email protected]</a>

Click to [email protected] send direct mail, on the theme: TestObject.

PS: If you encounter this situation fails, you can add a meta tag in the page header, content to yes.

<meta name="format-detection" content="email=yes">

1. Scroll end mobile penetration

description:

　On the pop open mask layer or rolling, the rolling body element can affect the lower layer. Experience is very bad.

Solution:

General idea is playing in an open box or when the mask layer, the acquired HTML scrollTop, positioned fixed to a body, top scrollTop value is negative value. Close popup box when the fixed positioning removed. Restore scrollTop value.

1. Mobile terminal layout

This is basically a program that we do need to identify the first mobile development, I summed up in one sentence:

REM classic layout and layout rookie VW

Of course, there are common, such as elastic box (flex) can be.

But it needs to be said is that the authors Taobao flexible.js layout has recommended we use vw layout.

This part you can get access to your online relevant information, I do not here tired out.