【问题标题】:Mobile device only partionally displays web page移动设备仅部分显示网页
【发布时间】:2017-08-27 14:57:49
【问题描述】:

非常抱歉打扰您,但我在 Google 上找不到此搜索查询的任何答案。

所以让我快速解释一下我的问题。 我创建了一个可以在纵向和横向模式之间切换的网页。

当我使用桌面时它非常好,页面显示正确。当我在我的 iPhone 5 上启动我的网页时,它会做一些“奇怪”的事情: 它仅部分显示页面。如果我想看到整个页面,我需要缩小,这对用户来说很烦人。

所以如果你们知道如何解决这个问题,请告诉我!

非常感谢您帮助我!

编辑: 我正在使用<meta name="viewport" content="width=device-width, initial-scale=1.0"> 标签

为了优化移动设备的 css,我使用了媒体查询

@media screen and (orientation:portrait) {...}

回答:

这是我的问题的原因:Reset zoom level onload。可悲的是,它不是 但有可能解决这个问题......情况就是这样,因为我有一个 上一页上的登录表单,每当我登录时链接到新页面 在 IOS 中,您的浏览器会自动放大输入,这 加载新页面时,仍然是缩放级别...

【问题讨论】:

  • 我们将看到更多您的代码来帮助解决这个问题。马上,听起来您可能没有在 元素中使用正确的视口元数据,您可能需要在 CSS 文件中编写一两个媒体查询。
  • 有时如果有内容溢出 会导致问题。请提供您的代码和屏幕截图(或网址)以便更好地调试
  • 如果我的回答对你有帮助,你能接受吗?我知道你还没有足够的声望来投票。
  • 问题是我不能提供很多代码,所以如果你能告诉我具体提供什么,我会尽力去做!截图将尽快发布
  • 另外,请看这个,这可能与您的问题重复:stackoverflow.com/questions/14272420/…

标签: html ios css desktop display


【解决方案1】:

使用<meta name="viewport" content="width=300"> 应该可以让您的网页在几乎所有移动设备上都自动缩小。但请确保您的网站针对移动设备进行了优化,否则您的所有文字都会变得很小,人们会希望他们再次放大。

【讨论】:

  • 它针对移动设备进行了优化,我通过添加 @media screen 和 (orientation:portrait) {...} 并更改网站的 css 来做到这一点
  • 这样可以解决问题吗?我回答你的问题了吗?您的@media 查询有效吗?
  • 不,它还不起作用:/,并且元标记已经在代码中
  • 尝试将width=device-width 更改为width=500。如果可行,我会改变我的答案。
  • 让它变小?
【解决方案2】:

这是我的问题的原因: Reset zoom level onload 遗憾的是,目前还无法解决此问题...

之所以如此,是因为我在以前的页面上有一个登录表单,每当我登录时,它都会链接到一个新页面。使用 IOS,您的浏览器会自动放大输入,当新页面加载时,仍然是缩放级别...

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2022-06-15
    • 1970-01-01
    • 2021-05-12
    • 1970-01-01
    • 2018-11-26
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多