在整个下午搜索了解决方案后,我在这里问你。我的视口问题与StackOverflow上提到的其他问题的主要区别在于我只能在纵向模式下访问它(因此没有旋转或横向模式)。这是我的问题:
我创建了一个网站,其基本结构包含三列:44pt-(div-element),232pt-(input-element)和44pt-width(div-element)。所以我的最大页面宽度等于320pt,所有元素的高度到现在为止<250pt。
如果我现在在iOS模拟器上渲染页面(通过Mac上的XCode),这应该与iPhone的行为相同,它不会正确缩放页面。我已经尝试了以下选项:
[no meta-tag]
显示宽度的大约240%
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
显示大约70%的宽度
<meta name="viewport" content="width=device-width;" />
专注于第一个具有“width = 44pt”
的div<meta name="viewport" content="width=320; initial-scale=1.0;" />
显示大约70%的宽度
<meta name="viewport" content="width=320;" />
专注于第一个具有“width = 44pt”
的div<meta name="viewport" content="initial-scale=1.0;" />
显示大约70%的宽度
<meta name="viewport" content="initial-scale=1.0;maximum-scale=1.0" />
显示大约70%的宽度
结果保持不变:网页太小(缩小太多),一旦太大(放大太多)。只有通过将“初始比例”值调整到.75左右,我才能获得大致所需的结果。
我对iPhone-Safari的错误是什么?我应该将哪些参数用于元视口标记?
答案 0 :(得分:0)
我终于在很久以前找到了一个解决方案并且认为可能有一天其他人感兴趣:我现在使用像素(“px”)而不是用点(“pt”)定义我的css文件中的大小。现在可以根据需要进行渲染。