Develop Reference

Using CSS zoom property to modify viewport size from Javascript

I'm building mobile site and I would like layout to always fit nicely into mobiles screen available. I know its common to use viewport with device width e.g.:
<meta name="viewport" content="width=device-width">
and then in CSS also use media queries to provide different styles for different resolutions/orientations e.g.:
#media only screen and (max-width : 460px) and (orientation : portrait) {
/*styles here*/
}
#media only screen and (max-width : 767px) and (orientation : portrait) {
/*styles here*/
}
et. etc. This can prove quite tedious however if only difference is widths, margins, font sizes etc but the actual layout of elements stay same.Also given the number of screen sizes for different mobiles you will most likely end up with resolutions where your layout dosent fit in perfectly.
Now, I decided to use css zoom property that basically zooms in the content. I decided to use simple JS to fit in the content into available screen space automatically:
$(".main").css("zoom", $(window).width() / $(".main").width());
.main is widest element in my webpage, basically container with all the elements inside. So the code above grabs the element and using zoom css property resizes it to whatever the available screen size is. From CSS I can still run media queries e.g.:
#media only screen and (max-width : 767px) and (orientation : portrait)
As this use HTML's meta tag viewport value that is set to device-width, but zoom property resizes the content to screen space available nicely.
Now my question is if there is anything wrong with this approach apart from not being pure-css? Is there anything I overlooked?

Make website page size normal desktop size in mobile devices

I am mid-way through re-coding my current site and I have come across a mobile compatibility problem.
If you view the current website via mobile device (here) you can see the width and height of the website is normal sized as it would be when viewing on a desktop with the ability to scroll vertically and horizontally.
However, on my new site (using bootstrap slate from bootswatch - bootswatch.com/slate/) when you preview it on a mobile device it tries to squeeze it all into the fixed mobile device width (here)
I have tried adding the lines below, however I don't see a difference.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
html,
body {
height: 100%;
width: 100%;
}
Is there any way to make the new site to be shown in the same dimension as the current one in mobile devices?
Thanks.

What you see is the responsive behavior of bootstrap I guess. And imho it definitely makes sense to fit the content into the device width on mobile devices.
You can read about disabling the responsive feature in your bootstrap project here: Disabling bootstrap responsiveness
UPDATE:
To make your content horizontally scrollable add:
html, body {
overflow: auto;
}
to your stylesheet.
If this doesn't work try adding !importantto the declaration:
html, body {
overflow: auto !important;
}
NOTE:
This is not the most efficient way css-performance wise, but given your comprehension level of CSS, I guess it would be too much for your to alter the bootstrap.css yourself.

For Bootstrap it self the steps on disabling responsiveness are below. You can download template/CSS with this disabled. Check out http://getbootstrap.com/getting-started/
Steps to disable page responsiveness
Omit the viewport mentioned in the CSS docs
Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
If using navbars, remove all navbar collapsing and expanding behavior.
For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed). This disables the "mobile site" aspects of Bootstrap.

Styling for various screen resolutions (smart phones, tablets, laptops, etc.)

I am trying to design a site that is easily accessible from tablets, smart phones, and desktops, and is equally usable from any device.
After a bit of reading, I found mixed numbers for the iPhone 4 resolution, which is 620px - 760px.
I am aware of using the following CSS to detect the type of media. However, the following CSS is not applied on my iPhone 4.
//detect smart phone
#media screen and (min-width:1px) and (max-width:780px) {
.inner-main-header{border:2px solid brown;}
}
Any ideas why this is? any suggestions what I can do in this case? my goal is to simply use one particular CSS for tablets and another for smart phones.
I appreciate any suggestions.
Many thanks in advance!

I believe it'd be min-device-width and max-device-width. Also, your pixels look a bit off:
//detect smart phone
#media screen and (max-device-width:640px) {
.inner-main-header{border:2px solid brown;}
}
//detect tablets
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
.inner-main-header{border:2px solid black;} //changed to black just to see difference
}

honestly I would use a site like this to redirect users to appropriate subdomains with their own respective css. If you opt not to do such a thing, I would suggest just using css to scale all the media based on screen size using values such as max-width: 100% and width:auto\9. Another good tutorial would be this youtube video good luck!

Android Browser resizes text automatically

I have a project that is displaying 16px text font at 0.5ems links on the iPhone perfectly fine.
However, when I switch to an Android browser, the text font enlarges itself and my positioning of the links are screwed.
My links are in a
<p><a>[Link]</a></p>
statement.
Is there any way to prevent the Android text from resizing itself? Or is there a better solution to this?
EDIT:
I just realised the android browser doesn't allow for auto scrolling as well. Why is this so? Aren't both the iPhone and Android browsers using webkits as its base? Why are they so different even though they use the same technology? Are there any extra attributes i should declare in CSS for it to work the same as the Safari counterpart?

I had a similar problem as well. I had a design that was designed specifically for the Retina display, but the retina display actually has a pixel density of 2, so a pixel isn't necessarily a pixel (non retina iphone pixel width: 320px, retina: 640px).
To fix that, I put this in the <head>: <meta name='viewport' content='width=device-width, initial-scale=.5, maximum-scale=.5'> so that a normal phone will scale as I expect, and the retina display would scale appropriately (half scale).
I'm not sure what kind of design you're using, but I'd play around with the initial-scale and maximum-scale, try both .5 and 1 and see what you get.

If you use pixels (px), it is related to the screen pixel density. An iPhone "retina" display would show text differently to your Android device.
This article covers the topic pretty well: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

I found a setting that might help in another question, Font size rendering inconsistencies on an iPhone:
body {
-webkit-text-size-adjust: 100%;
}
An alternate value is described in another question, Font size issue with iPhone:
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
Seems like one of these might prevent the android browser from resizing. Hope this helps.

If you want to stop Android from auto-scaling your pixel values, you can try adding this to your viewport meta:
target-densitydpi=device-dpi
Here's a good reference on the same:
http://designbycode.tumblr.com/post/1127120282/pixel-perfect-android-web-ui

screen.width and screen.height different values in different APIs/devices

Edit: also happens with $('body').width() and window.outerWidth
API 2.3.3 HVGA
Before and after rotating device outputs same screen width (320)
API 3.0 WXGA
Width and height toggle each rotation for example
starts with screenWidth:1280 screenheight: 800
I rotate 90
now has screenWidth:800 screenheight: 1280
so what do I do if I want to make certain changes on rotations
according to dimensions and want to target all APIs? I need a value which is the same for all devices.
Edit: For certain things I need pixel values, not percentages. That's why I'm using Javascript to calculate size based on screen width. This would work, since screen width is also pixel values and I can keep things proportional. But if sometimes screen.width gives me the current width, and others not, I can't use it...
-> The thing is I started working with a slider which uses absolute layout and needs pixel values for everything. I don't want to reimplement the slider, so I decided to calculate dynamically the size of the images and the whole layout using screen width. And initialize the slider with these values.
update
Look here is a similar approach to what I'm trying to do:
http://ryangillespie.com/phonegap.php#/phonegap.php?
Entry of June 18, 2011
"One Screen Resolution to Rule Them All"
I tried also with exactly that example, copy pasting it in my code. But it doesn't work either. window.outerWidth has the same problems as I'm describing for screen.width (as well as JQuery $('body').width()). It works as long as the device isn't rotated - it initializes well. But at the first rotation, depending of the device, I get problems. In some it works as expected, in others it interchanges the values, so that I get large width in portrait mode and short in landscape, in others it gives fixed width and height all time, in others it doesn't rotate at all....

Responsive web design techniques. I give a super brief example on my blog along with a book recommendation.
http://simonmacdonald.blogspot.com/2012/01/on-eight-day-of-phonegapping-multiple.html

I use media queries in two of my PhoneGap Apps. No javascript, except in
the case of anomalies.
For example, the "base" css could be for width 320 and portrait,
then using the cascading effect of css :-) add blocks like:
#media screen and (max-width: 480px) and (orientation:portrait) { make stuff bigger}
#media all and (min-width: 800px) { make stuff even bigger }
With queries like these in my link'd css files (and the device/os/phonegap
handling of orientation changes) the new layouts happen auto-magically.
NOTE: I learned all this from reading Simon's blog and the materials he suggested.

Coincidentally I found that this works:
$(window).resize(function() {
updateScaling($('body').width());
});
This is always called and passes correct width. As far as I remember it also works with screen.width
In updateScaling I calculate a scalingFactor and adjust my elements.
I tried out responsive CSS, media queries and so on, but at some point it didn't make sense anymore, because I have anyways to recalculate the margin of slider's UL based on current slide and new width - and other stuff which needs script. So I made everything with script.
I removed window.onorientationchange.

I'm not aware how phonegap presents in information for you, but for a native Android application you typically declare different layouts and image resources for various display densities and screen sizes/widths. See this page for more information: http://developer.android.com/guide/practices/screens_support.html