Sign Up Here
Keep me logged in
Forgot your password?
Sign In
Home Resize Website to Mobile

Resize Website to Mobile

Published on January 16, 2013 by in Uncategorized

There are three options in resizing your website to mobile: 1. website to mobile automatic conversion, 2. copying existing HTML and changing viewport settings or 3. completely recoding your site.

The following shows you how to use existing HTML to resize your website. Just adjusting your viewport settings and can offer mobile visitors a much better experience!

If you’re not a programmer, check out our free conversion tool, which does this with no coding.

Choosing your resize has a lot to do with the content of your site:

Does your site have a lot of text and images?  Consider letting the user decide how to resize for themselves, with no limitations.

In the website below, the window opens with images and text side by side. The user then zooms to see the food (left image) and can easily end up looking at an unattractive mess (right image). Consider this before setting resize parameters as unlimited.

Resize with unlimited zoom

To add no parameters on resizing, and ultimate user control:

<meta name=“viewport” content=“width=device-width; initial-scale=1.0, user-scalable=yes”>

 Is your site more like a web app?  Consider not allowing zoom.

In the example below, you can see that as soon as it opens, the mobile site is ready to scroll, so there’s no added benefit of zoom.

No resizing allowed

To not allow zoom:

<meta name=“viewport” content= “width=device-width; initial-scale=1.0, user-scalable=no”>

Is your site a mix of content and features?  Set a min and max value for zoom as you like.

Try some different min and max values to see what works best for your content.

To set zoom min and max values:

<meta name =viewport content=“width=device-width, initial-scale=1.0, minimum-scale=0.5 maxiumum-scale=1.0”>

We don’t recommend setting width to a pixel value, but here’s how if you want.

To set width as a pixel value:

<meta name=viewport content=“width=320”>

There are a few issues that resizing your site with viewport settings only will NOT fix or address that GinWiz will.  Let’s take a look . . .

Resizing – GinWiz vs. Manual Resize:

- Density (dpi): While your viewport settings will solve the issue of resizing, it won’t make any changes based on dpi.  You can modify your mobile website for different displays, but only Android allows you to specify dpi (see how more from Android on dpi).  Coding dpi into a CSS media query or window.devicePixelRation will only work on Android; GinWiz adjusts for over 14,000 devices automatically.

- Latency: Some devices have an amazingly high dpi, but run on processors that just can’t handle a lot or are connected to networks that don’t support large amounts of data transfer.  Regular programming can’t do much for you, but GinWiz will automatically adjust your site based not only on dpi, but device capabilities and connection.

- Width: If you’d like to adjust your site for an exact width, it’s a guessing game.  While iPhone is a standard 320 and so are many Androids, it’s not a great idea to set the width.  GinWiz keeps specs on over 14,000 devices and adjusts width for you.

Click here more information on GinWiz’s FREE mobile conversion.  It’s free and there is NO obligation.


You must be logged in to post a comment.

Convert your website to mobile easily with GinWiz!. In a few simple steps, you can make, build and create a mobile version of your website and make it completely compatible with different systems and devices, no matter if it is a simple site or an ecommerce one. Smartphone friendly, mobile friendly create a mobile website for FREE with GinWiz's builder.