Fit Webpage on Android

  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1893
  • Loc: Las Vegas

Post 3+ Months Ago

Howdy yall,
I have a web site that is a horizontal scrolling site, rather than vertical. Before anyone starts pointing out that horizontal is a bad design for the web, know that I did not design the site, our creative department did and I had no say in the matter, I was just told to build it. The site is basically a series of panels set next to each other. Mouse-wheel scrolling is handled by intercepting the vertical delta and applying it to the horizontal.

The problem: Fitting the site on android devices. I have added the following viewport meta tags:
Code: [ Select ]
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="height=device-height" />
  1. <meta name="HandheldFriendly" content="true" />
  2. <meta name="viewport" content="height=device-height" />


The page works beautifully on apple devices, but for the life of me, I cannot get it to fit properly on any browser on either of my Android devices, in fact, Android is cutting off the top ~230 pixels of the page. I have tried setting the viewport width to 1350px (which is our standard panel size) and several other tags, and nothing works at all.

EDIT: Forgot to add this bit:
Basically I want the web page to fit vertically, 100% from top to bottom within the browser. It does this fine on iOS, but on android it's another matter entirely. I messed with the target-densitydpi meta setting, and with that, I can get the page fully in the browser, but it has a top and bottom border that are like 2000px high, and that doesn't work at all. This is more frustrating than the old browser wars. At least back then you knew that your page position was consistent. It bothers me even more because I'm an android enthusiast, and generally expect android devices to be easier to work with.

Anyone have any tips?

TIA,
SoS
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

Do you have an example to mess with?

Whenever I'm having issues between browsers I Strip out everything down to basic HTML tags and start adding elements one at a time. it's PAIN in the butt but there could be one little element that is overlooked that is causing the issue. It could also be in the style sheet as well, maybe a height attribute that's over writing/messing with the meta tags.

I haven't had this issue personally but If you do have and example i might be able to help resolve it.

My typical starting point.
HTML Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
</head>
<body>
</body>
</html>
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>TEST</title>
  6. <meta http-equiv="X-UA-Compatible" content="IE=9" />
  7. </head>
  8. <body>
  9. </body>
  10. </html>
  11.  
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1893
  • Loc: Las Vegas

Post 3+ Months Ago

Unfortunately, it's in development and on an internal server, so I can't provide a link right now.
I have been experimenting, and what I have found so far is that the best way to display on Android (so far) is to NOT specify any viewport attributes at all.
I was using some javascript alerts to test some things and was getting wild results. For instance, my page is 900px high, about 19000px wide, and when I alert the page hight, it shows 900px. When I alert browser vertical space, it shows 1533px, but when using device-height, the page loads and the bottom 90% of the display is empty. It makes no sense.
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

So with my tests I've completed with the meta tags in place my results are
width 360
height 587
body scroll width 19008
body scroll height 1016
html scroll width 19008
html scroll height 1016

With out meta tags
width 360
height 640
body scroll width 19008
body scroll height 1598
html scroll width 19008
html scroll height 1016

Both are before refresh with the go button

I'm seeing the opposite with the device size i see no white space at the bottom with out i do.

I don't see anything cutting of the top on my test so there might be a css position issue with that and as far as the bottom white space it seem like it the meta tag is not in place the android browser force a min height on the webpage around 1600px (1598px) on my phone

my test
HTML Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Shutdown Block - ->
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="height=device-height" />
<!-- Shutdown Block -->
 
<title>Tester</title>
<script type="text/javascript">
 
function alertSize() {
   var myWidth = 0, myHeight = 0;
   if( typeof( window.innerWidth ) == 'number' ) {
      //Non-IE
      myWidth = window.innerWidth;
      myHeight = window.innerHeight;
   } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
      //IE 6+ in 'standards compliant mode'
      myWidth = document.documentElement.clientWidth;
      myHeight = document.documentElement.clientHeight;
   } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
      //IE 4 compatible
      myWidth = document.body.clientWidth;
      myHeight = document.body.clientHeight;
   }
   
   document.getElementById('test').innerHTML = 'Width = '+ myWidth +'<br />Height = '+ myHeight +'<br />Body Scroll Width = '+ document.body.scrollWidth +'<br />Body Scroll Height = '+ document.body.scrollHeight +'<br />HTML Scroll Width = '+ document.documentElement.scrollWidth +'<br />HTML Scroll Height = '+ document.documentElement.scrollHeight;
 
}
 
</script>
</head>
 
<body onload="alertSize();">
<div id="test" style="background-color:#06F;"></div>
<div style="height:1000px; width:19000px; background-color:#09F;">
<input type="button" onclick="alertSize();" value="GO!" />
</div>
</body>
</html>
 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <!-- Shutdown Block - ->
  6. <meta name="HandheldFriendly" content="true" />
  7. <meta name="viewport" content="height=device-height" />
  8. <!-- Shutdown Block -->
  9.  
  10. <title>Tester</title>
  11. <script type="text/javascript">
  12.  
  13. function alertSize() {
  14.    var myWidth = 0, myHeight = 0;
  15.    if( typeof( window.innerWidth ) == 'number' ) {
  16.       //Non-IE
  17.       myWidth = window.innerWidth;
  18.       myHeight = window.innerHeight;
  19.    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
  20.       //IE 6+ in 'standards compliant mode'
  21.       myWidth = document.documentElement.clientWidth;
  22.       myHeight = document.documentElement.clientHeight;
  23.    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
  24.       //IE 4 compatible
  25.       myWidth = document.body.clientWidth;
  26.       myHeight = document.body.clientHeight;
  27.    }
  28.    
  29.    document.getElementById('test').innerHTML = 'Width = '+ myWidth +'<br />Height = '+ myHeight +'<br />Body Scroll Width = '+ document.body.scrollWidth +'<br />Body Scroll Height = '+ document.body.scrollHeight +'<br />HTML Scroll Width = '+ document.documentElement.scrollWidth +'<br />HTML Scroll Height = '+ document.documentElement.scrollHeight;
  30.  
  31. }
  32.  
  33. </script>
  34. </head>
  35.  
  36. <body onload="alertSize();">
  37. <div id="test" style="background-color:#06F;"></div>
  38. <div style="height:1000px; width:19000px; background-color:#09F;">
  39. <input type="button" onclick="alertSize();" value="GO!" />
  40. </div>
  41. </body>
  42. </html>
  43.  
  44.  
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

The same hold true for the width as well a min width being enforced when the meta tags are not in place

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 65 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.