preface

Mobile WebView is a webKit-based control that displays web pages. Here is a summary of some mobile Webview Settings, and some compatibility summary.

Android Webview component WebSettings configuration

When using Webview component on Android mobile terminal, if some parameters of the component are not supported, many functions cannot be used, such as js cannot be loaded, caching cannot be used, etc., then it is necessary to do some configuration in Webview component. Get WebSettings Settings = getSettings(), and finally look at some examples.

Set encoding format

Set to utf-8

settings.setDefaultTextEncodingName("utf-8");
Copy the code

Sets whether to automatically load images

settings.setLoadsImagesAutomatically(true);
Copy the code

Sets whether to allow webViews to use the File protocol

The default setting is true, which allows arbitrary JavaScript code to be executed in the File field

settings.setAllowFileAccess(false);
Copy the code

Set whether to support automatic audio playback

Off by default

settings.setMediaPlaybackRequiresUserGesture(false);
Copy the code

Sets whether Javascript loaded from the file URL is allowed to read other local files

This setting is allowed by default on JELLY_BEAN versions prior to Android 4.1 and disabled by default on JELLY_BEAN versions and later

settings.setAllowFileAccessFromFileURLs(false);
Copy the code

Sets whether Javascript loaded through the file URL can access other sources

This includes other files and other sources such as HTTP, HTTPS, etc. This setting is allowed by default in previous versions of JELLY_BEAN and is disabled by default in JELLY_BEAN and later versions.

settings.setAllowUniversalAccessFromFileURLs(false);
Copy the code

Set whether to save the password

The default value is true. Change it to false to avoid personal sensitive data leakage

settings.setSavePassword(false);
Copy the code

Sets whether to use caching

Caching is turned off by default

settings.setAppCacheEnabled(false);
Copy the code

Set the use of cache mode

// Do not use network, only read local cache data
settings.setCacheMode(WebSettings.LOAD_CACHE_ONLY);

// Do not use cache, only get data from network
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);

Cache-control determines whether to fetch data from the network
settings.setCacheMode(WebSettings.LOAD_DEFAULT); 

// As long as there is local data, whether expired or no-cache, use the data in the cache.
settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); 
Copy the code

Set whether domStorage is supported

settings.setDomStorageEnabled(true);
Copy the code

Set whether to customize the page size

settings.setUseWideViewPort(true);
Copy the code

Set whether to support multiple Windows

settings.setSupportMultipleWindows(true);  
Copy the code

Set to support opening new Windows through JS

settings.setJavaScriptCanOpenWindowsAutomatically(true);  
Copy the code

Second, compatibility issues

In APP, you need to display and load web pages through Webview, which is equivalent to treating Webview as a browser, while Webview is a simple browser. Many H5 features and other functions are not well supported, so you will encounter various pits.

display

The Samsung I9100 (Android 4.0.4) does not support display:-webkit-flex, but does support display:-webkit-box.

Pseudo-class :active takes effect

  • Implement CSS pseudo-classes :active, bind document to touchStart or TouchEnd events, or add onTouchStart =”” to body
// add onTouchStart ="" <body ontouchStart ="" style="display: None "> / / document binding touchstart document. The addEventListener (' touchstart ', function () {}, false);Copy the code

Disable the system default menu

IOS long press A, img TAB long press to display the menu bar

-webkit-touch-callout:none;
Copy the code

Disallows the user to select text

-webkit-user-select:none;
Copy the code

The transition splash screen

// webkit-transform-style: preserve-3d; /* Use webkit-backface-visibility: hidden; /* Use webkit-backface-visibility: hidden; /* (sets whether the back of the converted element is visible from the user: hidden) */Copy the code

backface-visibility

– its – backface – visibility: hidden; Compatibility when encountered with mask layer background-color:rgba(); Use -webkit-backface-visibility: hidden; Property, and the app, the Webview will flash black.

Css3 animation compatible

Before Android 4.4, Android Webview based on the WebKit kernel implementation, need to add – WebKit prefix.

@-webkit-keyframes
Copy the code

The border-radius abbreviation is not supported

Android 4.2.x background color overflow and does not support border-radius abbreviation

  • This can be done with pictures instead of rounded corners
  • Try not to use CSS shorthand patterns
Border-left-radius: 999px; /* top left corner */ border-right-radius: 999px; /* top right */ border-right-radius: 999px; /* bottom right */ border-left-radius: 999px; /* lower left corner */Copy the code

background-color

For some phones (R7, Coolpad, SONY), background-color: RGBA () background transparency is not the same as the standard, practice is darker than the standard color, for these phones to use the media query to modify these attributes.

Touchmove events

The touchMove event will only trigger once on some Android devices (e.g. LG Nexus 5 Android 4.4, Mi 2 Android 4.1.1). Remember to pass in e as well

Soft keyboard and position positioning

In the Webview development, get focus, pop-up box, soft keyboard pops up, if the pop-up input box USES a fixed location, fixed in the bottom of the state, when a user is using a third party soft keyboard, such as QQ pinyin, input fields will be covered, bad experience, and in our cognitive level of existing technology, passive compromise solution is to, Our recommendation is to avoid scenarios in which input box elements appear at the bottom of the page, such as the input box is fixed at the top, or the page transition mode is adopted in the product design prototype.

Translate performs better than positioning in animation effects

Animations implemented using jquery and Zepto are not recommended

On low-end Android phones, there are all sorts of stuttering, flickering screen bugs

line-height

Line-height is often used to center text and can look different on different phones. What the hell! It looks perfect on the Chrome emulator, but! Android and IOS have shifted again. If we increase line-height by 1px, the text on iPhone will appear slightly ‘normal’. Since there are a large number of ios users in our app, and there are too many Android models, the text will be displayed differently for different models, so we can only reach the second best. The compatibility problem of line-height is not easy to solve. The smaller the container height, the more obvious the display difference. Solution: Slightly more height, preferably set the line-height to +1px, neither platform will look too ‘weird’.

Make scrolling smoother

-webkit-overflow-scrolling:touch;
Copy the code

The handling of gradients

Sometimes there are some gradients in the UI, you can use an online tool to generate gradient CSS, but this requires you to manually adjust the same effect as the UI, or you can directly adjust the UI to its ideal effect, it will generate highly compatible CSS: online tool

Low-end phones load weirdly

Rendering is not from top to bottom, but vertical, very strange, can be delayed loading of the page, to solve the weird loading effect

Some Samsung phones do not support the shorthand for background

// Not supported:background: url(../img/icon.png) no-repeat 0 0/contain; / / need to changebackground-image: url(../img/icon.png);
background-repeat: no-repeat;
background-size: contain;
Copy the code

The flex layout is not supported in IOS8

Safari uses the webkit kernel, which requires a separate compatibility on Ios8 to work

display: flex;
display: -webkit-flex; 
justify-content: center;
-webkit-justify-content: center;
align-items:center;
-webkit-align-items: center;
Copy the code

Telephone number identification

On iOS Safari (which other browsers and Android don’t), it will treat numbers that look like phone numbers as phone links, such as:

  • The value is a seven-digit number, for example, 1234567
  • A number followed by a plus sign is in the form of :(+86)123456789
  • The number of the double connection cable is in the format of 00-00-00111
  • The value is an 11-digit number, for example, 13800138000

1. Turn off phone number identification

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

2. Enable the call making function

<a href="tel:88888888">88888888</a>
Copy the code

3. Enable the SMS sending function:

<a href="sms:88888888">88888888</a>
Copy the code

Disable automatic capitalization on the iOS keyboard

<input type="text" autocapitalize="off" />
Copy the code

Disable text zooming

When the mobile device switches between vertical and horizontal screens, the text size will be recalculated and scaled accordingly. When we do not need this situation, we can choose to disable:

html {
	-webkit-text-size-adjust: 100%;
}
Copy the code

Set the Web WPP icon to add to the home screen

When we add a webpage to the home screen, in addition to setting the title, we also need to be able to customize the icon of the App. The code is as follows:

<link rel="apple-touch-icon" href="logo.png" />
Copy the code

Hide the address bar and status bar when adding to the home screen

When we add a web page to the home screen, we would like it to behave like an App, without the address bar and status bar. The code is as follows:

<meta name="apple-mobile-web-app-capable" content="yes" />
Copy the code

IOS has a blank block problem in page rollback

AfterEach (() => {// Remove blank occlusion window.scrollto (0, 1) by scrolling to the top; setTimeout(() => { window.scrollTo(0, 0); }, 0); });Copy the code

The keyboard pops up during input, causing the whole page to move up and the page cannot bounce back after the keyboard frame disappears

In some mobile phones, the keyboard pops up when input is entered, resulting in the whole page moving up and the page cannot bounce back after the keyboard frame disappears. Button can't click when input box element loses focus scrolling Settings 0 to the document. The body. The scrollTop = 0 | | document. The documentElement. ScrollTop = 0;Copy the code

NAN issues with ios date conversion

Date format string symbol substitution into '/' eg: '- dd yyyy - MM. The replace (/ - / g,'/')Copy the code