【问题标题】:Get my website to be zoomed out by default on mobile phones让我的网站在手机上默认缩小
【发布时间】:2011-04-05 14:34:51
【问题描述】:

所以我希望用户能够在我的网站上看到我的背景。目前我的网站宽度是925px,当您在移动浏览器(例如 iPhone、Opera Mini)中查看网站时,它会放大文本并且用户看不到背景。

我尝试使用meta viewport 标记失败。如何让我的网站在移动浏览器上默认缩小?

编辑:

这是我目前尝试过的代码:

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

【问题讨论】:

    标签: iphone html css opera-mini


    【解决方案1】:

    我很惊讶meta viewport 不适合你(在 Mobile Safari 上)。可以发一下你用的吗?

    更新:这通常对我有用...试一试:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    

    如果可行,您就可以开始使用比例值,让用户根据需要进行缩放,以及放大多少。

    【讨论】:

    • 这个解决方案是强制浏览器被放大,而不是像问题要求的那样被缩小。
    • No Steve - 它试图强制浏览器遵守页面的实际宽度(因此它既不放大也不缩小)。另请记住,这是 2010 年的有效答案。MobileSafari 现在的行为可能有所不同。
    【解决方案2】:

    我知道这是一个老问题,但无论如何我都会回答以防其他人需要答案。

    截至 2011 年 9 月,Opera Mini 仍在使用 Presto 渲染引擎 2.5 版。在 Presto 2.7 之前,Opera 中的 Viewport 不可用。 (Opera Mobile,我们的智能手机浏览器确实支持视口。)

    试试这个:

    <meta name="viewport" content="initial-scale=0.25">
    

    当您包含width=device-width 时,浏览器会“神奇地”** 找到内容区域并对其进行调整以填充设备的宽度。如果您想让背景透视,您需要缩小整个页面以适应视口。

    完全不使用&lt;meta name=viewport&gt; 也可以,但您通常会看到较少的背景图像。

    不过,理想情况下,您还应该使用媒体查询来创建一个可以在各种宽度下工作的网站。

    ** 使用浏览器开发人员能够比我更好地解释的某种启发式方法。

    【讨论】:

      【解决方案3】:

      经过多次试验和错误,我得到以下在 iPhone 5.0.1 和 Android 2.3.6 上正常工作。该网站的设计宽度为 480。根据您网站的宽度,您必须使用 iPhone 的宽度值。

      <meta name="viewport" content="width=520, target-densitydpi=high-dpi" />
      <meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml; charset=utf-8" />
      <meta name="HandheldFriendly" content="true" />
      <meta name="apple-mobile-web-app-capable" content="yes" /> 
      

      【讨论】:

      • 我必须放一个更大的宽度(1300)才能让它工作。 +1 因为我很绝望。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-04-22
      • 1970-01-01
      • 2013-05-26
      • 2021-10-16
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多