网站无法在移动设备上正确显示

Question

我似乎无法弄清楚为什么我网站上的某些网页无法在移动设备上正常显示。以下是我遇到问题的网页类型的链接：http://www.designelopers.com/html-2/what-is-html/

如果您在Chrome中查看它并在chromes移动查看器中检查它（检查工具栏左侧的小移动图标）并选择说苹果的iphone 6并刷新您可以看到我遇到的问题。这是一张它的样子：

现在我将内容的主宽度设置为百分比。如果我将它们更改为像素它可以工作，但我真的不想这样做。我为中高像素密度添加了一些媒体查询，如下所示：

@media only screen and (-webkit-device-pixel-ratio: 1.5)  {

{
#sidebarContainer {
display: none;
float: none;
}
#mainContentContainer {
float: none;
border: none;
width: 100%}
#textSectionInner {
padding: 5rem;
}

}

@media only screen and (-webkit-device-pixel-ratio: 2)  {

{
#sidebarContainer {
display: none;
float: none;
}
#mainContentContainer {
float: none;
border: none;
width: 100%}
#textSectionInner {
padding: 5rem;
}
}

有谁知道为什么会这样？感谢您的帮助

Answer 1

您需要为不同的屏幕尺寸创建媒体查询。最常见的是桌面版，中等版（适用于平板电脑版），小版（适用于手机版）。搜索媒体查询。

Answer 2

链结 Responsive Design

文章的一半以上有我认为可能有帮助的信息。

链接 - Another Helpful Example

希望这有帮助。