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

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，计算机之间的区别）。如果有人为所有可能的设备提供防弹解决方案，如果您能与我分享，我将很高兴：-）谢谢！

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

Answer 2

这个元视口无法帮助你，因为initial-scale是 1。这就是为什么它对iPhone来说太大了：你告诉设备这个页面的初始比例必须是其大小的100%（这里：1024px宽度），你必须删除这个参数或将其设置得更低（0.5或0.625，因为640/1024 = 0.625）。

尝试（这应该适用于iPhone和iPad）：

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

或（这在iPad上应该很小）：

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

编辑：

这应该有效：

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

我在一个没有很好地编码的移动网站上使用了这个技巧，它强制视口为 1024 并使其适合设备屏幕。您可以向元添加任何参数。