I was wondering what you guys and gals would remend as the most efficient want to dynamically rescale a website based on resolution?

Is there anything that rescales elements AND images? Or do I need to do those separately? I've been trying to use percentages and em's, but it seems like a huge hassle. Are there any scripts? I've been searching for quite a while and haven't found anything that quite fits yet.

I was wondering what you guys and gals would remend as the most efficient want to dynamically rescale a website based on resolution?

Is there anything that rescales elements AND images? Or do I need to do those separately? I've been trying to use percentages and em's, but it seems like a huge hassle. Are there any scripts? I've been searching for quite a while and haven't found anything that quite fits yet.

• javascript
• html
• resize
• resolution
• scale

• 1 It is a huge hassle. – Pointy Commented Jan 24, 2011 at 17:47
• In my opinion a very subjective matter, it depends hugely on what you are displaying and the arrangement of you site. – Trufa Commented Jan 24, 2011 at 18:07
• Can't you just rely on the browser's ctrl/+, ctrl/- and ctrl-0 for zooming? Just make sure your layout is fluid and it should scale prety well – Ruan Mendes Commented Jan 24, 2011 at 18:14
• @Juan Mendes - Is it possible to automate a zoom with a script? – Hanna Commented Jan 24, 2011 at 18:23
• I don't think so... IE has a zoom css property though if that's any help, I also heard it works in the latest WebKits – Ruan Mendes Commented Jan 24, 2011 at 18:29

2 Answers 2

New Media Queries are landed in CSS3 specification. You can read an awesome article on the subject from A List Apart Magazine (with example, try resizing your browser window)

There are also existing scripts of course.

The best way to detect the orientation of the device is by using meta tags. The viewport meta tag is used by Safari/chrome on the iPhone and iPad to determine how to display a web page. Following are the properties of the viewport

The viewport width to the width of the device by adding the following declaration to the head of your HTML file

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

To set the initial scale to 1.0, add this to the head of your HTML file:

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

To set the initial scale and to turn off user scaling, add this to the head of your HTML file:

Utilize the viewport meta tag to improve the presentation of your mobile browser. This meta tag sets the width and initial scale of the viewport. Add the appropriate viewport meta data to the head of the document to instruct the browser to present your content in as large a context as possible on the device’s screen. If you don’t set the viewport width, the page will be zoomed way out when it first loads.

Full Screen Mode

<meta name="apple-mobile-web-app-capable" content="yes">

If content is set to yes the web application runs in full-screen mode; otherwise, it does not. You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.