javascript - 如何使我的简单网站测验适合平板电脑和手机？

Question

如何使我的简单网站测验适合平板电脑和手机？横向模式下测验的大小为 1024x672。大小是静态的。如果没有适用于所有设备的万无一失的解决方案，我更愿意使用专门针对 iPhone 和 iPad 的解决方案。

这是测验:http://wp.servitus.ch

要求:

• 根据设备的当前屏幕尺寸自动缩放
• 用户不能手动缩放
• 可以强制横向模式吗？

我已经尝试过:

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

这适用于 iPad，但在 iPhone 上太大了。

有什么想法吗？

Answer 1

目前我正在使用下面的代码。暂时满足我的要求(区分iPad、iPhone、Computer)。如果有人有适用于所有可能设备的防弹解决方案，如果您愿意与我分享，我将很高兴:-)谢谢!

$(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');
    }
});