Develop Reference

Make window width of screen

I am making a mobile web page and struggling through dealing with various screen sizes and basically I want to make my page the width of the actual screen not the browser.
Because of the way mobile browsers work, the default "width" of most browsers is 320 pixels when the following meta tag is set:
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
What can I do to make it so that the page is the full resolution of the screen and not the "resolution" of the browser?
There must be some simple solution..
Note: setting the initial-scale flag to 2 made the page smaller than 320 pixels on both my iphone and android phone (640 and 480 pixels wide respectively) and setting it to .5 made the page 640px wide on both devices, but zoomed in on the android device. It gave the desired effect on the iphone..
My page: mmhudson.com/index1.html

The property you're missing from that list is target-densitydpi=device-dpi.
http://developer.android.com/reference/android/webkit/WebView.html
By default, WebView scales a web page so that it is drawn at a size
that matches the default appearance on a medium density screen. So, it
applies 1.5x scaling on a high density screen (because its pixels are
smaller) and 0.75x scaling on a low density screen (because its pixels
are bigger).
And
device-dpi - Use the device's native dpi as the target dpi. Default
scaling never occurs.

Did you try adding maximum-scale and adding densitydpi something like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, target-densitydpi=device-dpi">
Here is where you can find good examples for mobile browsers :
https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
But maybe it depends of the browser.

Why Does My Page Not Display In The Right Size On An Android Even With Viewport/Media Queries?

Okay So the website in question is this:
Now if you notice on this website, the resolution of the white background div is 445px across y 686px long. It's also fluid so if you shrink it, it will appear different to accomdate different sizes. (if you are on a cell phone that has a smaller width than 400px, it will actually show different images).
Okay, but the point is here is that this page is not showing right on android devices as shown below.
That phone, along with all the other phones in that previewer that are 480px x 800px are displaying the website like that. The website, as you can see if you click on it, is a max of 686px tall, so why the heck isn't the whole page showing on this mobile device?
The size of that "playplanet" logo is actually 180px across and it almost fills up the whole width and the width of that phone is SUPPOSED to be 480px across.
Am I missing something here?
If you look at the source code, you'll see I added the following meta tags:
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
These are supposed to tell the android browser to display the page as the actual width of the device, so it should be telling it to make it show as 480px X 800px (samsung galaxy s 2 is 480px X 800px), but in reality if you look at the screenshot, it is actually displaying it as HALF that size since the logo is only 180px and its almost filled up the whole screen.
It should fit in there perfectly. The funny thing is actually my smaller than 400px width layout works perfectly on the smaller feature phone sizes (240 x 320 or vice versa), but this bigger one is causing me problems.

Have you tried target-densityDpi=device-dpi?
Quoting from this article: Android team has implemented a custom meta viewport property to allow you to customize browser scaling for high resolution (HDPI) screens. The CSS "px" unit may differ from a device's actual pixels, as the browser "scales" images and fonts to a larger size than you requested. Worse, it's using a non-integer scaling factor (e.g. 1.5x zoom, to scale 320px to 480px) which makes images look really weird.
Also, in this introduction to meta viewport the example below the section "Setting the target density" looks like your case.
Here is the updated meta:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, target-densityDpi=device-dpi">

The screenshot you are looking at is flawed. It is displaying your site at a 240px x 400px resolution that is typical of many of the standard LG and Samsung smartphones. The Galaxy [as you point out] obviously has a higher resolution then that. My suggestion would be to report the bug to the service that you are using and until they correct it, try using another similar phone to test with. Any other android phone with the right resolution should work, as webpages are pretty much displayed the same for every single android device sans the resolution and orientation.

CSS Media Queries on Nexus 7, display resolution not working in code

I'm working with CSS Media Queries to load different templates for differently sized devices. I created a spreadsheet listing the display resolution of testing devices and the most common devices to come up with the size cut-offs. One of the devices that I'm testing is the Nexus 7 of which I've found the display resolution to be 1280 × 800. However when I use these values in my code, it doesn't work.
**the only reason I'm using no max or min is because I'm trying to find the exact resolution. If I replace with max-device-width with something rather large, it works and I've done enough testing to know that it works with various max values given but in order to properly complete my code to differentiate between 3 differently-sized device categories, I have to make sure I'm creating the right cut-offs. Is CSS resolution different? Thanks for any and all help in advance!
#media only screen and (device-width:1280px) and (orientation:landscape) {
/*style --code removed for sack of space */
}
#media only screen and (device-width:800px) and (orientation:portrait) {
/*style --code removed for sack of space */
}
Here is my viewport code in my html file
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

There is a difference between screen dimensions in CSS pixels and device pixels.
In the case of the nexus 7, the native device pixels are 1280 x 800 pixels.
However, if this was the reported width for media queries we'd end up with responsive designs being triggered for traditional desktop sizes.
As a result, many browsers settle on a CSS pixel size that more closely resembles the size of traditional pixels before high pixel density displays. Pretty much iPhone 1 - 3 pixel size.
The device-pixel-ratio reports (device pixels / CSS pixels)
e.g. 800 / 600 = 1.3333
To add even more confusion, these ratios sometimes change across OS releases. For example, as of Jelly Bean 4.2 my nexus 7 reports a width of 600px in portrait, down from 603.
This makes it difficult to target exact devices with width based media queries. I recommend accepting that you're designing for a huge number of device widths and attempt to create a responsive design that adapts between the range of device sizes that you choose to support.
Best of luck :)

Use the following viewport code:
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
or this for not allowing scaling:
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />
The weird part about the Nexus 7 is that (as jpgr posted) it doesn't allow you to use the 1280/800 space that it boasts (out of the box at least). It is almost as if it is running zoomed in to some degree despite scaling preferences being set.
I notice this issue when my graphics seems slightly blurry. I tested the window size via javascript and it was posting numbers about 25% lower then expected. You will notice I have exclude the scaling parameters as it seems to ignore them for the most part.
The real key is using the target-densitydpi = device-dpi... This seems to make very right as rain.
Love working with the Nexus 7 for sure!!!

Overly pragmatic answer, but you can basically use the screen size of 601x880 to target the Nexus 7. Not technically complete, but should be enough to get you started if you are trying to use breakpoints in your media queries.

Why images used in SenchaTouch 2 are 1/3 larger than normal size?

I'm developing a Android App with SenchaTouch2. I used a 480px wide png file as background image to fit in GalaxySII which has 480px width. It's perfectly fine in browser but after I exported as native app, that background gets bigger and out of the viewable range.
After some observation, if I want to fit in 480px screen, your original image should be 320px which is 1/3 difference.
Please let me know who can I manage to display background with original width n height.
Thanks!

It sounds like your WebView is performing scaling. That is, the default scale of 1.0 is equal to an mdpi device. Galaxy SII is an hdpi device, which would be scale 1.5. So your 480px image is becoming 480px * 1.5 or 720px and why a 320px would look like what you want.
Try specifying that the viewport uses the native DPI of the device like so:
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width"/>
Alternatively, you could specify it as:
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0"/>
You can read more about setting the viewport to target Android devices at: http://developer.android.com/guide/webapps/targeting.html
Note that if you run into subsequent font issues, you'll need to follow the steps in my answer to font size different on ios and android
Also note that for Sencha Touch 2, it looks like they turned off this automatic viewport setting: http://www.sencha.com/forum/showthread.php?184219-Viewport-Meta-Tags-not-injected-automatically

Why android browser viewport is much smaller than actual screen size of the mobile phone, even when using width=device-width?

I would like to ask why my HTC Desire HD's browser reports viewport's width of 369px even though the actual pixel size of the screen is 480x800 WVGA.
I am using in my page this CSS styles:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
Can you please explain me this strange behaviour and how to force Android browser to actually set viewport's width to 480px rather than weird 369px ?
Thank you for any help.

A detailed explanation of the issue can be found in that blog post.
The number that you see (369px) is actually the size of the device multiplied by the default, assumed, screen density of 160 dpi.
In order to use the device screen density, you have to specify, in the viewport meta, that you want to use the device's dpi.
e.g.:
<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">
EDIT: The documentation of the WebView class now also has information about the target-densityDpi parameter, and the possible values.