Website to mobile website conversion

Question

Hi guys,

I have a simple webpage here.

If I want to convert it into mobile website, what should to my html or something such that when I open it with my mobile, I should be able to see the whole page in my screen.

I tried adding this to my html code... in head

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

Mobile specs : Any web browsing supporting mobile and am targetting a width of 320px. No Horizontal scrolling allowed. Only vertical scrolling.

Can you help me fix this bug? Just the code for converting to mobile website. I tried a few solutions online but didn't seem to work out.

Thanks! :D

Answer 1

I would start with taking that meta tag off... it seems to be messing with the user's ability to zoom in and out of the page, which is bad usability.

I would say, if you're going for a site optimized for mobile, you're going to have to rethink how you're using CSS. Instead of declaring widths in pixels, use percentages. Mobile device widths change between landscape and portrait mode, but 80% is always 80%.

This article will walk you through how to start setting up different styles for different device widths: http://www.alistapart.com/articles/responsive-web-design/