【问题标题】:site only shows half screen on mobile? Rest of screen is just body background?网站只在手机上显示半屏?屏幕的其余部分只是身体背景?
【发布时间】:2019-04-29 22:56:06
【问题描述】:

好的,我有一个不知道如何解决的大问题,我以前从未遇到过 - 我的网站有一半无法在移动设备上显示。它被切成两半。我必须在一周内展示这个网站,直到现在还没有在移动设备上进行测试——我不知道该怎么做。这里是:

我有一个完整尺寸的图像作为顶部图像,并且其中的文本正在延伸,但是我不知道问题是什么。我在我的 CSS 中使用了一些媒体选择器,但只是为了改变各种小东西。

我阅读了在 CSS 中设置 site-content 宽度的内容 - 这可能是问题所在吗?

我很绝望 - 我该如何解决这个问题?

【问题讨论】:

标签: jquery html css mobile


【解决方案1】:

理想情况下,您应该计划好移动设备。但是,让它看起来不那么糟糕的一个非常快速的解决方法是替换:

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

在 HTML 中:

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

这会将屏幕宽度设置为设备宽度,但不会将文本完全缩放到适合移动设备的尺寸,这意味着您的字体会比应有的小,但会适合。截图如下:

【讨论】:

  • iPhone 5 仍有问题,我以后该怎么办
  • 使用媒体查询从peopleBox div 中的所有margin-right: -70px; 中删除小于370px 宽度的屏幕尺寸。
猜你喜欢
  • 2013-09-30
  • 1970-01-01
  • 2021-05-24
  • 2017-11-18
  • 2011-07-24
  • 2015-03-10
  • 1970-01-01
  • 2021-01-28
  • 1970-01-01
相关资源
最近更新 更多