How to make my simple website-quiz fittable to tablets and mobile phones?

Question

how could I make my simple website-quiz fittable to tablets and mobile phones? The size of the quiz is 1024x672 in landscape mode. The size is static. If there's no bullet-proof solution for all devices, I would prefer a solution specific for iPhones and iPads.

Here's the quiz: http://wp.servitus.ch

Requirements:

• auto-zoom dependent of current screen-size of the device
• user should not be able to zoom manually
• possible to force landscape mode ?

I already experimented with:

<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">

This works fine for iPads, but is way too large on the iPhone.

Any ideas ?

Answer 1

This meta viewport can't help you, as the initial-scale is 1. That's why it's way too big for iPhone: you tell the device that the initial scale of this page must be 100% of its size (here : 1024px width), you have to remove this parameter or set it lower (0.5 or 0.625, as 640/1024 = 0.625).

Try with (this should work for iPhone and iPad) :

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

or (this should be very small on iPad) :

<meta name="viewport" content="initial-scale=0.6,user-scalable=no,maximum-scale=1,width=device-width">

EDIT :

This should work :

<meta name="viewport" content="width=1024">

I used that trick on a mobile website that haven't been well coded, it forces the viewport to 1024 and make it fit in the device screen. You can add whatever parameters to the meta.

Answer 2

Currently I am using the code below. This meets my requirements for the moment (distinction between iPad, iPhone, Computer). If anyone has a bullet-proof solution for all possible devices, I would be glad if you would share it with me :-) Thanks!

$(document).ready(function() {

    var isMobile = (/iPhone|iPod|Android|BlackBerry/).test(navigator.userAgent);
    var isTablet = (/iPad/).test(navigator.userAgent);

    if(isMobile) {
        $('<meta name="viewport" content="initial-scale=0.45, maximum-scale=0.45, width=device-width, user-scalable=yes">').appendTo('head');
    } else if(isTablet) {
        $('<meta name="viewport" content="initial-scale=0.95, maximum-scale=0.95, width=device-width, user-scalable=no">').appendTo('head');
    } else {
        $('<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width, user-scalable=no">').appendTo('head');
    }
});