viewport - android webview 屏幕适应问题

Question

target-densitydpi = device-dpi 用了之后虽然 webview的分辨率==实际窗体的分辨率

但是整个html以及js交互超级卡？？这是为什么？

target-density据说不推荐用，那android端的替代方案是什么？

Answer 1

Hello landlord:

The first question: screen adaptation problem

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

Generally in the html header information, adding such meta can achieve the effect of adapting to the screen, provided that your css supports it.

Second problem: The interaction between html and js is stuck in android.

In the official version of Android 4.4 (many domestic mobile phone manufacturers do not follow Google’s version), the kernel of webview still uses WebKit. The performance of this kernel is consistent with the new kernel ( Chromium) is still relatively poor. But generally speaking, turning on hardware acceleration will improve slightly. WebKit，这款内核的性能和新的内核(Chromium)相比还是比较差的。但是一般来说，开启硬件加速会稍有改善。

// 在androidmanifest.xml 文件中添加如下代码。
<application android:hardwareAccelerated="true" ...>

注意：Android 硬件加速有好几种开启方式哦，点击这里

第三个问题：解决方案：

• 如果楼主想开发纯粹的 web app, 请使用新款手机。官方Android4.4之后内核Chromium

  rrreee
• Note: There are several ways to turn on Android hardware acceleration, click here

Third Problem: Solution:

🎜🎜If you want to develop a pure web app, please use a new mobile phone. After the official Android 4.4, the kernel Chromium performance biu biu biu has improved. 🎜🎜 🎜🎜If you want to support lower versions of android, you can try using cordova + crosswalk, details here (ps: crosswalk also has its shortcomings)🎜🎜 🎜

Answer 2

This setting can adapt the screen to the loaded html
settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);

Answer 3

Use rem to write styles

Answer 4

<meta name="viewport" content="width=device-width, initial-scale=1" />

Answer 5

What are you using this to restrict?