为什么我的网站在Android模拟器和设备上看起来有所不同？

Question

I have built a website (no link for the moment). Said website is responsive and generally works well across most modern devices. It helps that the only really modern CSS features I am using are "transition," "transform," and "box-sizing." They are generally used in both prefixed and unprefixed forms.

Now, since I don't have a bazillion Android devices here, I thought I'd try the website in the Android Emulator offered with the Android SDK. At that point, I was a bit shocked to find that it was rather broken in everything below 4.3.

The issue seems to be that my menu implementation uses "transform: translate();" and that the Android stock browser apparently does not support this property.

I noticed that Google seems to use the same WebKit version (534.30) in the emulator images for Android 4.0, 4.1, 4.2, and 4.3. (If I can trust the user agent string.)

In the Android 4.4 and above emulator images,everything works as expected. Android 4.4 is also the first version to use a WebView implementation based on Chrome (version 33).

My own Android device (from Sony) runs on Android 4.3. According to the user agent string, the WebView's WebKit version there is also 534.30. I tried my website in a browser that uses WebView (Lightning browser from F-Droid). And it worked, including animations.

A colleague also opened my web page on his Samsung device with Android 4.0. It worked there too. (Haven't checked the user agent there.)

So, I thought, maybe Google updates WebView via Play Services. To the best of my understanding, that does not seem to be the case: I disabled the Play Services app, deleted its data, rebooted the phone. The page still worked.

What is going on? Are manufacturers wildly patching WebKit? Can I trust the WebKit version number at all?

(Updated to clarify the actual issue.)

Answer 1

Check the screensize. the emulators always have different screen size. that may be the issue.