I have a report from two Android tablet users (Android 7 and Android 9) that some graphic elements are exceeding the width of the page. But the graphic elements are not that large to begin with!
The web page that uses a css with pixel width rules.
The max width in the CSS is set here:
#surround {
max-width:990px; }
but all content within the surround is set here:
#all-index {
max-width:900px; }
I do have this in the HTML header
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The page works on all PCs and browsers tested, and I have tested browsers running on various hardware and running on Microsoft, Apple, and Linux. In the HTML body I have a test for mobile phones based on pixel width which sends those devices to an 'm.thispage.com.' So mobile phones are not an issue.
These problem elements are .png files and I have sized via GIMP to the exact size of the height and width arguments in the html 'a href" code. It works fine on all PC's.
In each case the tablet screen pixel size exceeds the size of some of my test laptops, which render the pages perfectly. HTML5 checker says there are no errors in my code.
Why are the tablets giving the weird results?
Source: View source
