iphone - working - safari html5 video not playing

CSS or Javascript that can resize any HTML viewed on iphone (6)

I'm trying to come up with some CSS or Javascript that can autoresize any HTML that is being viewed in iPhone browser (UIWebview component) such that the content fits the viewport and the images/text all resize. (not the same as achieving a zoom out).

The main idea I got from another question is to adjust the width of elments, something like:

@media screen and (max-width: 480px){
    max-width: 320px;

I also have the usual viewport meta tag:

<meta name="viewport" content ="width=device-width">

This doesn't resize it perfectly as it looks like this currently. Here is the original HTML.

I was wondering what else I can do to achieve this goal? I don't want to get this right for just this HTML but other HTML pages too.

Maybe a jQuery plugin already exists for this?

I don't want to get this right just for this page, I want something more generic for any HTML page.

I suppose that you can't use max-width on the html- or body-element. It works with:

@media screen and (max-width: 480px){
    #wrap {
    max-width: 320px;

(further changes in #logo needed)

Set your wrapper or body-element to width: 100%; overflow:hidden;. All subelements get an max-width: 100%. Now convert all pixels to percentages in reference to their parents with this tool: http://rwdcalc.com/ it helped me a lot!

You could link different stylesheets to different media's like so:

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css"> 
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">

This way you can create different CSS rules for all kinds of screen sizes etc. This gives you a huge amount of flexibility.


@media only screen and (max-width: 999px) {
  /* rules that only apply for canvases narrower than 1000px */

@media only screen and (device-width: 768px) and (orientation: landscape) {
  /* rules for iPad in landscape orientation */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* iPhone, Android rules here */

These might look proprietary but fact is these are CSS3 media queries implemented in Firefox, Safari (including Mobile) and Google Chrome.

After which, create three different layouts. 1.widths up to 480px (iPhone, Android): tight spacing, single-column; 2.up to 980px (iPad in portrait): fluid columns only on top section, single-column elsewhere; 3.wider than 980px: fixed, two-column centered layout.

You might also want to adjust your font size for each different styles to fit them perfectly for the targeted devices.

Also, if you are targeting the iOS platform, make sure your layout automatically fills the display of the iDevice. In mobile webkits, you might want to use this:

<meta name="viewport" content="initial-scale=1.0">

This is because mobile safari displays a zoomed out 980px wide version of the page even if the layout itself is narrower. You can read more of these specifications here : http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

You should be aware that orientation media query, although supported on the iPad, doesn’t work on the iPhone. Fortunately, size queries like width and device-width work, so layout-switching is possible without JavaScript with some combination of those.

Also, with the advent of Retina display devices, you might want to target them specifically to serve high-resolution graphics.You can check this out for details : http://webkit.org/blog/55/high-dpi-web-sites/

finally, for Retina devices, you may use this :

<link rel="stylesheet" media="only screen and -webkit-min-device-pixel-ratio: 2" href="highres.css">