1280x800 resolution? Doesn't look like it.

[bnrbranding]

So I was really excited to check out some of our websites (I own a web dev firm) on my new Nexus 7 and I was really disappointed. Most of our sites are built on a 960px wide template to provide maximum compatibility with various screen resolutions so I expected to see a little breathing room on either side of the sites I looked at. However, there is none. They sites display exactly like a 1024px wide screen. I looked at the same sites on my iPad2 and they display the same.

One of our sites is 1044px wide and it actually causes a horizontal scroll bar.

What gives??

 

[bnrbranding]

Ok, this is really weird. I was using Chrome so I figured I would try another browser to see what happened. I installed Opera and guess what? The sites display properly for a 1280 screen.

Why on earth would Chrome force everything to look like 1024??? Guess I will be switching browsers until Google gets Chrome fixed.

 

[Ravynmagi]

If fits the website to the screen, strips off the unused space many sites have on the sides. They do it to make them more readable and fill the screen with more content.

 

[dralezero]

Probably why the gallery won't show the width and height of screenshots as it does for other pictures. ;-)

I don't think its exactly 1280x800. But I don't feel like getting out laptop to check screenshots again

Sent from my Nexus 7 using Android Central Forums

 

[bnrbranding]

That was my original assumption too but that does not seem to be the case. As I mentioned, one of our sites is 1044px wide and it causes a horizontal scroll bar in Chrome. I need to do some testing, but this would appear to screw with adaptive design. if you are not familiar with the term, one of the basic ideas is to use media queries to determine the screen size being used and then adapting the site to work on that size. For example, a site might stop displaying the right column once the screen is smaller than X pixels. It would be extremely disappointing if most of the major Android browsers are not capable of displaying 1280 wide websites.

 

[AZImmortal]

I'm not an expert on this, but I believe that the displayed area of the webpage depends not only on the browser but on the dpi setting (not the actual display's dpi). You might find this interesting.

http://darkforge.blogspot.com/2010/05/customize-android-browser-scaling-with.html

The Nexus 7's display is definitely 1280x800.

 

[bnrbranding]

What really blows me away is that Opera displays properly. Chrome, FF, and Dolphin all scale the site. Look like we'll be messing with the viewport meta tag.

 

[Unicorn Rancher]

Just curious. How did the default browser do at rendering the webpage?

 

[kenyee]

What really blows me away is that Opera displays properly. Chrome, FF, and Dolphin all scale the site. Look like we'll be messing with the viewport meta tag.

I was going to mention this, but it looks like you got to it. There was a recent MSDN that went through this as well...the browsers basically try to decide what looks "best" (i.e., no squinting, etc. for high DPI displays) and scale by default. You can use meta tags to force the size/viewport displayed.

If you didn't set it on your web pages, that's why...

 

[William Donelson]

I have this set on my 1024 wide HTML5 web pages, but it's not enough. The pages get cropped:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

​