移动safari上的网页没有缩放到适合视口？ [英] Webpage on mobile safari is not scaling to fit viewport?

问题描述

我创建了一个简单的仅使用ems和百分比作为css单位。它是一个容器div包装一些元素，它的中心在页面中有以下代码：

  position：absolute; 
 top：50％; 
 left：50％; 
 margin-top：-25.875em; 
 margin-left：-38.187em; 
 padding：0; 
 width：76.375em; 
 height：47.75em; 
  

它在所有浏览器都很好，除了iphone和ipad。

我添加了：

 < meta name =viewportcontent =maximum-scale = 2，minimum-scale = .2，initial-scale = .6> 
  

它在ipad上自行缩放，但对于iphone来说仍然是大的，在肖像模式下完全缩放。

最后，通过谷歌浏览和使用元标记，我可以想出的最佳解决方案是将元标记减少到：

 < meta name =viewportcontent =user-scalable = yes> 
  

结合使用：

  @media all and（max-device-width：780px）{
 body {
 text-align：center; 
} 
 .page-content {
 position：relative; 
 top：0; 
 left：0; 
 display：inline-block; 
 margin-top：4％; 
 margin-left：100px; 
 margin-right：120px; 
 margin-bottom：4％; 
 text-align：left; 
} 
} 
  

页面仍然呈现非常大的比例，但可以至少缩小。

移动safari应该自动缩放页面吗？

解决方案

/ div>

改为使用：

< meta name =viewportcontent =width = device-width，initial- scale = 1.0>

I created a simple using only ems and percentages as css units. It is a container div wrapping some elements and it's center in the page with the following code:

position: absolute;
top: 50%;
left: 50%;
margin-top: -25.875em;
margin-left: -38.187em;
padding: 0;
width: 76.375em;
height: 47.75em;

It works great in all browsers except for the iphone and ipad. It renders only the top right corner of my page.

I added :

<meta name="viewport" content="maximum-scale=2, minimum-scale=.2, initial-scale=.6">

And it scaled itself down on the ipad but was still to large for the iphone and the page would not scale at all in portrait mode.

Finally by googling and playing around with the meta tag the best solution I could come up with was reducing the meta tag to this:

<meta name="viewport" content="user-scalable=yes" >

In combination with this :

@media all and ( max-device-width: 780px ) {
  body {
    text-align: center;
  }
  .page-content {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    margin-top: 4%;
    margin-left: 100px;
    margin-right: 120px;
    margin-bottom: 4%;
    text-align: left;
  }
}

The page still renders a very large scale but can be scaled down at least.

Isn't mobile safari supposed to scale the page down automatically? Are the relative units messing me up here?

Any help is appreciated, Thanks!

解决方案

Use this instead:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这篇关于移动safari上的网页没有缩放到适合视口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！