CSS or Javascript that can resize any HTML viewed on iphone

Question

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.

Start by creating a layout for mobile first. Test it for mobile. Then start using media queries for larger display sizes. In that case you will have to test `min-width` instead of `max-width` - like `@media (min-width: 480px) { /* styles for larger display * / }`. Look for Luke Wroblewski's "Mobile First". — Ana, May 25 '12 at 12:21
@Ana I want to create something generic that can work for all HTML pages. I'm trying to see if thats possible rather than doing this on a project by project basis. — Abs, May 25 '12 at 12:33

score 8 · Answer 1 · answered May 25 '12 at 11:51

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.

Source

those will all match to desktops also. also ipad ones will all match to iphone. use max-device-width also — Cole Tobin, May 27 '12 at 17:06

score 5 · Accepted Answer · answered May 27 '12 at 17:22

A grid system would offer a lot of flexability. Most scale images and text (if necassary), and transform into smooth, mobile layouts.

I prefer the 1140 CSS Grid http://cssgrid.net/

There is also:

score 3 · Answer 3 · answered May 25 '12 at 11:12

3

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)

answered May 25 '12 at 11:12

chaenu

1,915
16
32

score 2 · Answer 4 · answered Jun 02 '12 at 11:16

2

Be careful with:

<meta name="viewport" ...

There seems to be a bug on iOS devices.

Also, have a look at Twitter Responsive Bootstrap for developing responsive websites, and responsive.is for testing.

answered Jun 02 '12 at 11:16

nicoschneider

86
3

score 1 · Answer 5 · answered Jun 02 '12 at 09:56

Use the following meta tag in the top of your head tag in the html page :

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width; initial-scale=0.83; maximum-scale=0.83; minimum-scale=0.83; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

You can change the initial-scale and maximum-scale as per your requirement to fit the content.

score 0 · Answer 6 · edited Mar 24 '19 at 14:50

@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: https://developer.apple.com/library/archive/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: https://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">

score 0 · Answer 7 · answered Jun 01 '12 at 19:40

For starters this a good reference for 'Media Queries for standard devices' http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Does the following styling work for you?

/* Smartphones (portrait) ---------------- */
@media only screen and (max-width : 320px) {
     /* Styles */
     * {
        max-width: 320px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
     }
}

The box sizing will take into account padding when applying the max width of 320px. So it won't be adding any padding onto the 320px (as it would be doing by default).

Give it a go, good luck.

score -1 · Answer 8 · answered May 29 '12 at 12:32

-1

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!

answered May 29 '12 at 12:32

Bastian Rang

2,137
1
19
25

CSS or Javascript that can resize any HTML viewed on iphone

8 Answers8