Databases
StackOverflow2013
Postsdbo
POPage Scaling Issue Across Android Devices
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPage Scaling Issue Across Android Devices
    text
    copied!<p>I'm having an issue with scaling between two different android devices that have the same screen resolution. </p> <p>My first device is a "Nexus 7 Tablet" and the second is "Samsung Galaxy Note". Both devices have a screen resolution of 1280x800 and both devices force the webpage display into portrait mode (via the Dolphin Browser). The dolphin browser also uses the "Full Screen" add-on.</p> <p>To add some context to why I need the screen size to scale properly on page load, I'm trying to build a TV Remote Control web interface to be used with Eventghost. I had been fighting with trying to have the "Viewport" Meta tag handle the resizing, but I cannot seem to get it to work properly (despite all the documentation available for it on the Android side of things).</p> <p>I found a page that advised that I could use a combination of the Viewport Meta Tag and some CSS to handle the scaling, and that I would just need to add an entry for each device size (No problem since both my devices have the same screen resolution). The page I found the technique is below:</p> <p><a href="http://www.propublica.org/nerds/item/adaptive-design-fixed-widths-and-tablets" rel="noreferrer">http://www.propublica.org/nerds/item/adaptive-design-fixed-widths-and-tablets</a></p> <p>So after trying this, to my delight. the scaling was working properly on my Nexus 7. When I loaded the same page via the Galaxy Note however, the scaling didn't work (scaled down a bit, but about half the page was still cutoff). I loaded <a href="http://www.portvie.ws" rel="noreferrer">www.portvie.ws</a> (from page above) to see what the screen size for each device was showing, and both were 800x1280.</p> <p>The HTML being used is as follows:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=0"/&gt; &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt; &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt; &lt;script src="script.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body onLoad="StartUp()" background="Background.png"&gt; &lt;center&gt; &lt;table border="0" cellpadding="0" cellspacing="0"&gt; &lt;tr&gt; &lt;td Width="200" Height="200" Background="A_HOMEBUTTON.png"&gt;&lt;/td&gt; &lt;td Width="700" Height="200" Background="A_HOMESCREEN.png"&gt;&lt;/td&gt; &lt;td Width="700" Height="200" Background="A_BLANK.png"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;table border="0" cellpadding="0" cellspacing="0"&gt; &lt;tr&gt; &lt;td Width="1600" Height="50"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;table border="0" cellpadding="0" cellspacing="0"&gt; &lt;tr&gt; &lt;td Width="1600" Height="2310" Background="B_HOMESCREEN.png"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>The CSS that I'm using to handle the scaling is below:</p> <pre><code>@media screen and (device-width: 800px) { html { zoom: 35%; } } body { -webkit-user-select: none; overflow: hidden; } </code></pre> <p>Any help in understanding this behavior would be greatly appreciated!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload