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 codeSets whether to automatically load images
settings.setLoadsImagesAutomatically(true);
Copy the codeSets 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 codeSet whether to support automatic audio playback
Off by default
settings.setMediaPlaybackRequiresUserGesture(false);
Copy the codeSets 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 codeSets 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 codeSet 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 codeSets whether to use caching
Caching is turned off by default
settings.setAppCacheEnabled(false);
Copy the codeSet 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 codeSet whether domStorage is supported
settings.setDomStorageEnabled(true);
Copy the codeSet whether to customize the page size
settings.setUseWideViewPort(true);
Copy the codeSet whether to support multiple Windows
settings.setSupportMultipleWindows(true);
Copy the codeSet to support opening new Windows through JS
settings.setJavaScriptCanOpenWindowsAutomatically(true);
Copy the codeSecond, 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 codeDisable the system default menu
IOS long press A, img TAB long press to display the menu bar
-webkit-touch-callout:none;
Copy the codeDisallows the user to select text
-webkit-user-select:none;
Copy the codeThe 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 codebackface-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 codeThe 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 codebackground-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 codeThe 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 codeThe 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 codeTelephone 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 code2. Enable the call making function
<a href="tel:88888888">88888888</a>
Copy the code3. Enable the SMS sending function:
<a href="sms:88888888">88888888</a>
Copy the codeDisable automatic capitalization on the iOS keyboard
<input type="text" autocapitalize="off" />
Copy the codeDisable 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 codeSet 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 codeHide 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 codeIOS 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 codeThe 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 codeNAN issues with ios date conversion
Date format string symbol substitution into '/' eg: '- dd yyyy - MM. The replace (/ - / g,'/')Copy the code