I have a small webview (with a height of 75 pixels) that displays html content with the following metadata in my head:
<meta name="viewport" content="width=device-width, initial-scale=1" />
This html will be displayed on websites on Android Phone, Android Tablet, iPhone and iPad.
On telephone devices (Android Phone / iPhone), the width of the web browser container is the same as the width of the device, so the viewport data meta tag above works fine.
But on tablet devices (Android Tablet / iPad), the width of the webview container will be dynamic, so sometimes the width of the web browser container will be less than the width of the device.
This means that on the tablet, whenever the width of the web browser container is less than the width of the device, the html content should be cropped.
However, after changing the metadata, to have either
<meta name="viewport" content="width=50, initial-scale=1" />
or
<meta name="viewport" content="width=500, initial-scale=1" />
I found that metadata is actually ignored on Android and iPhones / iPads with iOS9. This means that content will be configured and displayed as expected on all of these devices. I can only see this problem on iPads pre iOS9.
I tried to remove the metadata tag in viewport, and I also tried to use the following metadata tag
<meta name="viewport" content="width=100%, initial-scale=1" />
and both work fine, but I was wondering if there was any cleaner solution since I was advised not to modify or delete the viewport metadata that I am currently using.