CODEWITHSUNDEEP
iphonehtmlcss
Abs
Abs

Reputation: 57916

CSS or Javascript that can resize any HTML viewed on iphone

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.

Upvotes: 14

Views: 8960

Answers (8)

JudeJitsu
JudeJitsu

Reputation: 748

@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">

Upvotes: 0

nicoschneider
nicoschneider

Reputation: 86

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.

Upvotes: 2

user850234
user850234

Reputation: 3463

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.

Upvotes: 1

Dave Haigh
Dave Haigh

Reputation: 4547

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.

Upvotes: 0

Bastian Rang
Bastian Rang

Reputation: 2187

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!

Upvotes: -1

Connor
Connor

Reputation: 1034

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:

Upvotes: 5

Martie
Martie

Reputation: 280

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

Upvotes: 8

chaenu
chaenu

Reputation: 2025

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)

Upvotes: 3

Related Questions