[mobile] Scale to device width not working

kikibu · 06-27-2011, 05:04 PM

Hello all. I hope you can help me with the following problem with the mobile version of http://thekind.tk, my band's website.

(direct link for desktops)

As you can probably see, the website isn't that big but on my ipod 4G it appears zoomed out. Of course the first thing I tried was putting this line between my <head>:
Code:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
But somehow this doesn't do anything for me. Even if I play with the parameters such as putting the scale at 2 or 3, the whole meta thing doesn't seem to affect my site's viewport at all.

Any ideas on how to solve this?

emericana · 06-27-2011, 09:35 PM

Try this:

<meta name="viewport" content="width=device-width; minimum-scale=1.0; maximum-scale=1.0" />

kikibu · 06-28-2011, 12:58 AM

Thanks. I tried a lot of combinations including your suggestion, which is actually in the current version online.

Somehow the <meta> line doesn't do anything for my site. I use it right here:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; minimum-scale=1.0; maximum-scale=1.0" /> 
<title>THE KIND</title>

Any idea why?

Apostropartheid · 06-28-2011, 02:44 PM

I believe the margin you left on the body element is the what's causing the issues.

kikibu · 06-28-2011, 05:05 PM

Quote:

Originally Posted by Apostropartheid

I believe the margin you left on the body element is the what's causing the issues.

Without margins and center aligns it looks like this

I have tried to set the scale to 2 manually, or a defined width of 320, that all doesn't do anything when I visit the site on my ipod.

kikibu · 06-28-2011, 08:24 PM

This is how it looks like with no margins set anywhere, also the DIV Align center is out. Unfortunately it still doesn't work.

I tried removing everything except for The Kind logo and that also doesn't work. I have a feeling that I am overlooking something very simple but can't find what it is!