I have a problem with scaling between two different Android devices that have the same screen resolution.
My first device is the Nexus 7 Tablet, and the second is the Samsung Galaxy Note. Both devices have a screen resolution of 1280x800, and both devices force the web page to be displayed in portrait mode (via the Dolphin browser). Dolphin Browser also uses the Full Screen Add-in.
To add some context to why I need screen size in order to properly scale the page load, I am trying to create a web interface for remote control of the TV that will be used with Eventghost. I struggled with trying to change the “Viewport” meta tag to resize, but I can't get it to work properly (despite all the documentation available to it on the Android side).
I found a page that said that I could use a combination of Meta Tag Viewport and some CSS to handle scaling, and that I would just need to add an entry for each device size (no problem, since both of my devices have the same screen resolution). The page on which I found the technique is below:
http://www.propublica.org/nerds/item/adaptive-design-fixed-widths-and-tablets
So, having tried it, to my pleasure. scaling worked properly on my Nexus 7. When I loaded the same page with the Galaxy Note, the scaling did not work (it decreased slightly, but about half the page was still disabled). I downloaded www.portvie.ws (from the page above) to find out what screen size for each device is displayed, and both were 800x1280.
The HTML used is as follows:
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js"></script>
</head>
<body onLoad="StartUp()" background="Background.png">
<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td Width="200" Height="200" Background="A_HOMEBUTTON.png"></td>
<td Width="700" Height="200" Background="A_HOMESCREEN.png"></td>
<td Width="700" Height="200" Background="A_BLANK.png"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td Width="1600" Height="50"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td Width="1600" Height="2310" Background="B_HOMESCREEN.png"></td>
</tr>
</table>
</body>
</html>
The CSS that I use to handle scaling is shown below:
@media screen and (device-width: 800px) { html { zoom: 35%; } }
body
{
-webkit-user-select: none;
overflow: hidden;
}
Any help in understanding this behavior would be greatly appreciated!