'Responsive Design Mode in iOS WKWebView and Android WebView to create a scaled picture of devices HTML rendering
In iOS and Android apps that feature the WKWebView and the WebView is often necessary to set the webview in a special way with meta attributes.
For example when creating an iOS application I had to inject this code into the HTMl for a special local page:
<head><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'></head>
Also into the BODY I injected
user-select: none;-webkit-user-select: none;
The SO question below shows how it could be necessary to inject other settings:
WKWebView equivalent for UIWebView's scalesPageToFit
My question is about the Responsive Design mode that many web browsers have for testing the appearance of web pages with the different devices.
In particular the dimensions of the devices are reproduced, as well as the dpi value I think.
For example, in Firefox Responsive Design Mode there are iOS and Android devices, among the others, that you can display the page inside, as a "simulation".
I would like to know what attributes have to be injected to recreate those device "simulations" inside a WKWebView and a WebView, that will be inside a iOS and Android app
and in a manner that the device profile appear entirely like a scaled device.
What counts is that the aspect ratio is correct and the dpi is reproduced, also in scaled mode, like having that device but depicted as a scaled image.
The main devices are listed inside Firefox and their w,h,dpi values are displayed, but the meta and body attributes could be different.
I think just a single complete example could be useful, where every needed attribute are provided.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|