Develop Reference

Get page height with address bar?

I'm having trouble with sizing a page. I'm resizing an image based on the height of the page. I don't want any scrolling on the page however on mobile devices the address bar is interfering. Sometimes the page gets the height without the address bar and puts in scroll bars other times it gets the height with the address bar and runs fine
Is there a way I can get the height of the page with the address bar? Or force it to show? (or force it to hide?)

Actually I had your problem, there are 2 ways to solve it, but they can't help you anywhere, on every browsers!!
WAY 1 :
Check this has everything you need
http://www.html5rocks.com/en/mobile/fullscreen/
The Chrome team has recently implemented a feature that tells the browser to launch the page fullscreen when the user has added it to the home screen. It is similar to the iOS Safari model.
<meta name="mobile-web-app-capable" content="yes">
WAY 2:
Using scroll and resize event on your window object to set height as same as your viewport anytime.

$(window).width() not giving viewport width correctly

I have almost always used $(window).width() to check the viewport width. It normally works for both browsers and devices. But for a website on which I need to show a particular splash screen if viewport width is less than 768px, this is not working. It gives correct width upto a point but below that it keeps giving 980px howsoever narrow I make the browser. There are a few particular conditions for this site:
This site was responsive in beginning (using bootstrap) but then made non-responsive. For this we removed viewport meta tag and set following rule in css that overrides its responsive widths:
.container{ width: 1170px; }
If I resize the whole browser i.e. the window that contains all browser tabs, then it does give correct width (less than 980px also, which is the desired behaviour), but if I use development tools and use the mobile layouts from there then width is never reported to be below 980px.
It would not have mattered that it worked on resizing only the main browser window, but the issue is that it is not working in devices as well. I added an alert and on mobile devices, again width is never alerted to be less than 980px.
Can someone please suggest some solution for this or explain why it is not working as expected?

I can't seem to find any authoritative source, but there are many pages that mention smartphones assume a website is 980px wide unless told otherwise.
Apple's developer site for instance says
The majority of webpages fit nicely in the visible area with the viewport width set to 980 pixels in portrait orientation, as shown in Figure 3-4. If Safari on iOS did not set the viewport width to 980 pixels, then only the upper-left corner of the webpage, shown in gray, would be displayed. However, this default doesn’t work for all webpages, so you’ll want to use the viewport meta tag if your webpage is different. See Supported Meta Tags for more on viewport.
Figure 3-4 Comparison of 320 and 980 viewport widths
(Incidentally, it was the iPhone which first did this, but other phones soon followed.)
So the solution is either to put
<meta name="viewport" content="width=device-width">
into the head (in your case, back into the head), or, acknowledge that the site is now not-responsive, and will not perform optimally on a phone!

Making a header not change size when a page is scaled by a phone

So, there is an app that links to two different webpages.
The first one is made by me, it is responsive so when it is loaded on a phone everything fits nicely.
The other one is made by the company i work for and is not responsive.
Now I am supposed to add a bar at the top of both pages and when they are loaded in the app the bar needs to have the same size for both pages. I can not change anything on the non-responsive page, only the bar at the top.
Lets take 900px and 360px as an example, one page scales down to fit on 360px for the iphone and the other stays on 900px width so it is scaled down to fit on a mobile screen by the phone.
http://imgur.com/6tV1IDT
I need to make a bar for the 900px width one that always have the same height as the one on the 360px width page even if it is scaled down by different phones. (scaling down to differnt widths/heights)
Is there any way to set the height of an element to be ignored by phone scaling even if the rest of the page is scaled?

I think if you just define width: 100%; for that bar it should work, also on the non-responsive page.

Try adding this to the head of your document <meta name="viewport" content="width=device-width, initial-scale=1">. As your question is horribly written it's hard to even understand what you want or trying to fix.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The rest of the head below... -->
</head>

I know this was not worded so it was easy to understand but maybe someone will search something similar and end up here anyway so here is the way i solved it.
//get the width of the browser without the scaling
//if the window is smaller than 260 my paged stopped scaling and started to use a horizontal scrollbar instead
//the minimum depends on your webpage I think. (Change the 260 to the minimum width of your page.
currentWidth = screen.width > 260 ? screen.width : 260;
//get the relative size depending on the size of the non-scaling webpage.
//The page I worked with had a width of 1050.
//If the browser is wider than the page set the size to 1.
relativeSize = screen.width < 1050 ? (1050/currentWidth) : 1;
After you got that value you can use relativeSize * (the size you have when it is not scaled) and it will end up being the same size even if the page is sized down.
I set it to the onLoad and onResize events and resized my header whenever the page size got changed. i.e. when someone flips a phone over you might want to resize again.
EDIT: screen.width instead of window.outerWidth to get it working on iphone.

How to have Chrome render a page emulating a viewport

I am working on a Chrome extension and I am running into the following issue. I would like to resize a tab to a specific width and height, but want to override the automatic resizing of elements. So I figured I should either somehow override the onresize event or instruct chrome to render the page while manipulating the (perceieved) viewport.
For some reason I cannot find anything to perform the former and on the latter, I have found a lot of information on the meta viewport tag but for some reason cannot make it work.
See also: Dynamic viewport and Can I change the viewport meta tag in mobile safari on the fly?
To give an example how do I render this page as if it was in a window(/tab) of e.g. 600 pixels wide even though the actual tab is 1200 or whatever amount of pixels wide (and being resized, either programmatically or manually)?
Example:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" id="viewport" content="width = 600, height = device-height, maximum scale = 1.0, minimum-scale = 1.0">
<title>Viewport testing</title>
</head>
<body>
<div style="width: 90%; border: solid 3px;">Current Viewport: <script>document.write(document.documentElement.offsetWidth.toString());</script> pixels</div>
</body>
</html>
The 600 is completely ignored and the div resizes while resizing the tab/window.
Am I overlooking something in the Chrome API?
The goal of this particular function of the extension is to be able to select an element (e.g. a div) or region (with crosshairs) of a webpage and resize the tab to show just that. I have everything working fine (selection etc, resizing and scrolling , detecting the element size etc etc) but obviously all responsive elements would be changed upon a window resize. I want to prevent that from happening.
Thanks

Fixed scale elements on mobile browsers

I'm currently writing a Javascript plugin that needs to display an accordion notification (the sort that slide down from the top of the screen).
It works beautifully on desktop browsers simply with this css on the modals and accordions.
position: fixed;
top: 0;
left: 0;
width: 100%;
Unfortunately, that doesn't work so well on mobile browsers like Android and iOS. The default behaviour on my Galaxy S2 with Android 4 ICS is that the fixed position elements position in the correct place, and size to 100% screen width. Unfortunately, as soon as you pinch zoom and change the scale of the page, the browser doesn't seem to recalculate the 100% width and the element goes off-screen. Panning the content doesn't pan the fixed elements.
I found iScroll, a Javascript plugin which looks to do exactly what I want - except it needs the source of the main content of the page to be changed in order to work. My plug in has to work on any site and so unfortunately this isn't an option.
Does anyone have any ideas?

Try adding
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
to your head which should stop the mobile browser from resizing the content.