我怎么能让我的简单网站 - 测验适合平板电脑和手机?在横向模式下,测验的大小为1024x672 . 大小是静态的 . 如果没有针对所有设备的防弹解决方案,我更倾向于专门针对iPhone和iPad的解决方案 .
要求:
-
自动缩放取决于设备的当前屏幕大小
-
用户不应该手动缩放
-
可能强制横向模式?
我已经尝试过:
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
这适用于iPad,但在iPhone上太大了 .
有任何想法吗 ?
2 回答
目前我正在使用下面的代码 . 这符合我当前的要求(iPad,iPhone,电脑之间的区别) . 如果有人为所有可能的设备提供防弹解决方案,我很高兴你能与我分享:-)谢谢!
这个元视口无法帮助你,因为
initial-scale
是1.那么's why it'对于iPhone来说太大了:你告诉设备这个页面的初始比例必须是其大小的100%(这里:1024px宽度),你必须删除此参数或将其设置为较低(0.5或0.625,为640/1024 = 0.625) .试试(这适用于iPhone和iPad):
或者(这在iPad上应该非常小):
编辑:
这应该工作:
我在一个编码不好的移动网站上使用了这个技巧,它强制视口为1024并使其适合设备屏幕 . 您可以向元数据添加任何参数 .