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

时间:2014-01-07 11:01:42

标签: javascript html css html5 web

我怎样才能使我的简单网站测验适合平板电脑和手机?在横向模式下,测验的大小为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上太大了。

有什么想法吗?

2 个答案:

答案 0 :(得分:0)

这个元视口无法帮助你,因为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并使其适合设备屏幕。您可以向元数据添加任何参数。

答案 1 :(得分:0)

目前我正在使用以下代码。这符合我当前的要求(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');
    }
});