Tips for mobile development

Time:2019-11-3

Preface

Recently, I wrote a hybrid app project in the company. The pages are basically completed in H5 and embedded in the native WebView. I found a problem. Under iPhone 6, the status bar of Apple’s mobile phone will block the page, causing the page to move down and the style to be disordered. Finally, I found some solutions on the Internet and added a meta tag to solve the problem. Today, I’d like to summarize the common meta tags and some tips for mobile development.

  1. viewport

This is a necessary label for mobile page development, which is used to adjust the layout viewport to be consistent with the visual viewport, and prohibit page zooming, etc.

  1. apple-mobile-web-app-capable

apple-mobile-web-app-capableIs to set whether the web app runs in full screen mode.

Syntax:

Explain:

If content is set to yes, the web application will run in full screen mode, otherwise, it will not. The default value of content is no, indicating normal display. If you choose to run in full screen mode, the default Apple toolbar and menu bar are removed.

The problem I encountered at the beginning of this article was solved by setting the meta tag.

  1. Set the color of the top status bar

Explain:

The premise for this tag to work is that the full screen mode must be turned on to run webapp in advance, that is, the meta tag of the second item must be specified synchronously, otherwise this tag will not work.

If content is set to default, the status bar will display normally. If set to blank, the status bar will have a black background. If set to blank translucent, the status bar displays black translucent. If it is set to default or blank, the page is displayed below the status bar, that is, the status bar occupies the upper part, and the page occupies the lower part, without blocking each other or being blocked. If set to blank transparent, the page will fill the screen, with the top of the page covered by the status bar (it will cover the height of the page 20px, while the retina screen of iPhone 4 and itouch4 is 40px). The default is default.

  1. Webapp added to the title after the main screen (new in IOS 6)

  1. Set cache

Mobile pages are usually cached after the first load, and then each refresh uses the cache instead of resending the request to the server. If you do not want to use cache, you can set no cache.

  1. format-detection

Format detection enables or disables automatic identification of phone numbers in the page.

Syntax:

Explain:

By default, the device automatically recognizes any string that might be a phone number. Set phone = no to disable this feature.

  1. HTML5 calls the dialing function of Android or IOS

HTML5 provides a label for calling dial automatically. Just add Tel: to the a label’s href.

Call the mobile phone directly as follows:

Click to call 1567776767

PS: if it fails in this case, you can add a meta tag to the page header, and the content is set to yes.

  1. The input box under iPhone and iPad appears inner shadow by default.
Element{
  -webkit-appearance: none; 
}
  1. The absolute positioning element of the sliding page on the mobile terminal shakes

I found some solutions to this problem online for reference only.

  • Set the height of the body to 100%
body,html{
    widht:100%;
    height:100%;
}

If there are other special effects for the finished page in the project, setting this property directly may affect other functions of the page.

If you use this method, the local debugging effect is not good, it is recommended not to use.

  • Add a transform attribute to a fixed positioned element

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

  • Nesting a box in the outer layer

Add one more layer of box, fix the outer layer for fixed positioning, and set the inner layer for absolute positioning;

...
  1. The input box cursor under iPhone is too long

The input input input box cursor is too long under iPhone, and Android display is normal.

Method:

Lower the line height style value of the input tag.

  1. Under IOS, the page slides and gets stuck, which is not smooth

Set a CSS style on the element where the content scrolls to achieve inertial scrolling and elastic effect.

{
  -webkit-overflow-scrolling: touch;
}

-webkit-overflow-scrollingThe attribute controls whether the element uses the roll back effect on the mobile device. It has two values:

auto: with normal scrolling, when the fingers are removed from the touch screen, the scrolling will stop immediately.

touch:
With a springback scroll, when the finger is removed from the touch screen, the content continues to scroll for a period of time. The speed and duration of rolling are directly proportional to the intensity of rolling gestures. A new stack context is also created.

  1. Fixed positioning elements at the top or bottom of the page block part of the content of the page.

Method 1:

Add to the outermost divpadding-bottom, the value is the fixed positioning element height;

Method two:

Using pseudo element, add pseudo element after to the outermost div, and set the height as fixed positioning element height.

.wrapper::after{
  content: '';
  Height: 'fixed positioning element height';
}
  1. Prohibit copying and selecting text
Element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}
  1. The input keyboard events Keyup, Keydown and keypress in IOS are not well supported

When using input search to do fuzzy search, input keywords in the keyboard, query through Ajax background, then return data, and then mark the returned data with keywords red. Using input to monitor keyboard Keyup events is OK in Android mobile browser, but it turns red slowly in IOS mobile browser. After inputting with input method, the Keyup event is not immediately corresponding. Only after deleting can the Keyup event be corresponding!

terms of settlement:

You can use the oninput event of HTML5 to replace Keyup

document.getElementById('test').addEventListener('input', function(e){
      var value = e.target.value
      ....
  })

Then achieve the effect similar to Keyup!

  1. Some JavaScript code under WebView is not executed, such as alert().

terms of settlement:

WebView is just a carrier, and the rendering of all kinds of content needs to be implemented with webviewchromeclient, so set a default base class webchromeclient.

PS: in this part, you need to set up a base class webchromeclient with the help of native development. Code:

WebView.setWebChromeClient()

  1. 300 ms delay for mobile click

300ms is acceptable, but we have to solve the problems caused by 300ms. 300ms leads to poor user experience. To solve this problem, we usually use tap event to replace click event on the mobile terminal.

Two JS are recommended, one isfastclickOne istap.js

For details about the click delay processing scheme of mobile terminal, please refer to: click delay processing scheme of mobile terminal

  1. Mobile click through

The cases are as follows:

Point penetration event test
Baidu

Div is the mask of absolute location, and Z-index is higher than a. The a tag is a link in the page. We bind the dip event to the div:

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

When we click the mask, the div disappears normally, but when we click the mask on the a tag, we find that the a link is triggered, which is the so-called point penetration event.

Reason:

Touchstart is earlier than touchend is earlier than click That is to say, the trigger of click is delayed. This time is about 300ms. That is to say, after tap is triggered, the mask is hidden. At this time, click has not been triggered. After 300ms, because the mask is hidden, our click is triggered to the following a link.

terms of settlement:

  1. Try to replace the click event with the touch event. For example, use the touchend event (recommended).
  2. With fastclick, see GitHub warehouse above for details.

  3. Use preventdefault to block a tag’s click.

  4. Delay a certain time (300ms) + to process the event (not recommended).

  5. Generally, the above can be solved. If not, click event will be replaced.

The touchend event is described as follows:

$("#haorooms").on("touchend", function (event) {
   event.preventDefault()
 
 })
  1. In IOS, when Chinese input method is used to input English, a space of one sixth may appear between letters

Can be removed by regular

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

  1. Solve the problem of video label video auto full screen playback in IOS

Add properties to the video tag:

PS: if it is embedded in WebView, the following support codes need to be added by the native development partners:

webView.allowsInlineMediaPlayback = YES;

  1. Mobile terminal click link to send email
[email protected]

Click and send an email directly to [email protected] with the subject of testobject.

PS: if it fails in this case, you can add a meta tag in the page header, and the content is set to yes.

  1. Rolling penetration at mobile end

Description:

Scrolling on an open pop-up window or mask layer will affect the scrolling of the body element in the lower layer The experience was very bad.

terms of settlement:

The general idea is to get the scrolltop of HTML when opening the pop-up or mask layer, change the body to fixed location, and the top value is a negative scrolltop value When closing the pop-up box, remove the fixed positioning. Restore the scrolltop value.

  1. Mobile terminal layout

This is basically a plan that we need to determine before we do mobile development. I summarize it as follows:

Classic REM layout and rookie VW layout

Of course, there are common ones such as flex.

However, it needs to be said that the author of Taobao flexible.js layout has recommended that we choose VW layout.

In this part, you can refer to the relevant information on the Internet by yourself, and I will not do much elaboration here.

Posterior language

Some of the front-end knowledge points I usually write will be put under my GitHub warehouse. Welcome to spray lightly, ha ha.