Tag Archives: knockoutjs

Viewport & media query in design for mobile

Responsive design is undoubtly the trend to design a website for both big screen and mobile screen. The magic lies on the media query in CSS.

What media query do?

It query how the screen or device that presenting the web page looks like. For example, how long is the device width, a 1024px screen or a 640px one.

Like this (in html file):

<link rel="stylesheet" media="screen and (color)" href="example.css" />

or like this (in css file):

@media all and (min-width:500px) { /* your css here */ }

So, you can change your css responsively and respectively as the screen changes.

What viewport do?

Another relative technique is the viewport. It is created by Safari and can hardly be a standard. But it is there to be used. When a mobile device render a traditional web page in a little screen, to avoid using a narrow width to make the page looks weird (for those has never been developed to fit mobile screens), the browser use a larger screen, say, 980px, to render the page. Then the browser zooms out to fit the content to the 320px screen. If you don’t want your site be zoomed out, you can use this:

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

Then, the web page is rendered as a device-width browser, it will look like a narrowed desktop browser by dragging.

No picture means nothing (No pic you say a jb)

fixed, device-width viewport
fixed, default viewport
flexible, device-width viewport
flexible, default viewport

So what?

With device-width viewport, at least your font-size would be as normal and clear to read. If you use flexible or fixed design in your website only, you should not modify the viewport, for that users would zoom in & out to read your content, while your layout wouldn’t go weird.

Anything to do with media query?

Of course! If you use media query to use defferent css in defferent screen-size, you would absolutely get the best and optimized effect of your sites. But that would be quite a lot of work.

For more reference, check out here:

Media Queries, W3C Recommendation 19 June 2012

Using the viewport meta tag to control layout on mobile browsers