Develop Reference

$(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!

Trouble figuring out why my site takes up half the screen on iphone

I haven't tested it on an android device yet because I don't have one, but when I visit my site on my iphone it looks like the image below. I can't figure out why it loads like that. The site is completely responsive, and I have this in the header:
<meta name="viewport" content="width=device-width, initial-scale=1">

Inside the <header> element of your site, in this div:
<div class="header-ads f-right">
There is a 728x90 google ad, which although it is not visible on your page, is still there and is widening your page and making the rest of your content scale down.
Removing that google ad fixes the issue.

Usually this is because there is some element on the page which is wider than your main content column. Later iPhones tend to zoom out to accomodate this additional content.
Check all the element widths and ensure that none are hard coded values. Use width:100% for full width responsive content.

How to show initial-scale 1.0 to devices below 570px width only

On my website, I have a mobile version for devices below 980px, however I would like devices blow 570px only to see this and if they rotate their mobile device, for them to then be able to see the full site with their device scaling if needed.
Change my pages width to see the mobile version. This is what I want devices to see on portrait mode but in landscape I would like them to see full version. I thought about implementing tilt detection, however nowadays you can get 27" all-in-one touch computers which can tilt!

If you don't have the viewport tag included, then the page will render using the device resolution. That means it will likely return 980px not the css pixels you're expecting. This is the default value of most mobile browsers (on Android and iOS devices at least). So, trying to add the viewport tag by checking if the width of the window is less than 570px without already having the viewport content tag set to "width=device-width" would be fruitless. This is why your first attempt did not work.
Also, if you try and remove the viewport tag AFTER the page is already rendered (for instance, inside a $(document).ready(function () {}); it would remove the tag, but the page would be unaffected.
However, you can set the viewport tag to have a different content value. So, in this case, you'd include the <meta name="viewport" content="width=device-width, initial-scale=1.0"> on the page, then in your document ready, use jQuery to set the content attribute to default width value of 980px instead. Because the DOM is ready when you are checking the width of the window, changing the value of the content attribute will cause devices that honor this property to render the page at the default 980px. (This is horribly small on my iPhone5 and impossible to use, but you stated that you find it acceptable.)
//add this to your document ready function and make sure
//that the viewport is initially set to content="width=device-width"
var pageWidth = $(window).width();
if (pageWidth < 570) {
$('meta[name="viewport"]').prop('content', 'width=980px');
}
Why you don't have to worry about resize events:
For most current devices that you are targeting, the window width is not resizable and the resize event will not be triggered on orientation change because it's not a change in the width of the browser, rather it's a change in zoom level. On your desktop, however, the browser won't even care about the viewport meta tag at all, so, no matter what value you have there, it doesn't affect the behavior.

mobile version of website doesn't fit horizontally

I'm trying to produce a mobile version of my website, but have encountered one problem:
The the whole website fits properly on the computer (with an example browser width of 480px) but leaves space on the right when viewing on my mobile phone (regardless of the browser I used). So the whole site looks good, but you can scroll "out of the website".
I first tried to disable horizontally scrolling, so I included this line:
<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
To disable the (still scrollable!) space on the right I added this to my "mobile.css":
It worked on the computer, but not on my mobile.
body{
width: 100%;
overflow-x: hidden;
}
My website is avaiable here: my mobile website
My mobile.css file is located here: my "mobile.css"
I have tested the website on following mobile browsers:
Google Chrome
Dolphin
The default android browser
I originally wanted to avoid Javascript, but if there is a javascript solution, please don't hesitate to post it!

If you want your layout to be mobile friendly, it's best to be thinking about this right from the beginning. So, for example, if you are going to set fixed widths on elements (which I don't recommend), such as—
#back-menu-left {with: 500px;}
you need to ask yourself what will happen to this on a small screen. So, either don't set that width, or immediately write an #media rule to override it on smaller screens.
(I didn't check through the rest of your code, just stopping when I found one oversized element. Best to check and see if there are any other overwide elements like that.)

Ignoring Orientation

I am building a web application for iPhone. Since the application shows different content while in different orientations, the built-in animation between the two orientations animates the original content as well.
For better result, I would like to disable the animation between the portrait and landscape. Is there a way to do it for web app?
I have checked the <meta> tag but there is not a relevant one.
Thanks for any help!
Felix

I don't think this is possible. The only option there is for handling orientation in using viewport.
From the documentation (found here: http://developer.apple.com/safari/library/documentation/appleapplications/conceptual/Dashcode_UserGuide/Contents/Resources/en.lproj/Dashcode_UserGuide.pdf), it states:
Viewport
The values in this section control how users can view
your mobile Safari web application
when they use it on iPhone or iPod
touch. When users change the device
orientation from portrait to
landscape, webpages can get scaled to
fit the new screen orientation. The
two options for the Orientation value
are:
“Adjust page width to fit.” When you choose this option, your web
application resizes (that is,
increases or decreases in width) when
the device orientation changes. This
option is generally recommended for
mobile Safari web applications,
because it enhances the user’s
perception of the web application as a
standalone application and not a
webpage.
"Zoom page to fit.” When you choose this option, the width of your mobile
Safari web application does not change
when the device orientation changes,
but the scale does. In other words,
the content of your web application
will appear a bit bigger. You might
want to choose this option if your web
application has a complicated layout
that you don’t want to change in width
when the device orientation changes.
An example:
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1.0">
Br,
Paul Peelen