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

【问题标题】：Website not displaying correctly on mobile devices网站无法在移动设备上正确显示
【发布时间】：2015-04-25 09:50:56
【问题描述】：

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

如果您在 chrome 中查看它并在 chrome 移动查看器中检查它（检查工具栏左侧的小移动图标）并选择说苹果的 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;
}
}

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

【问题讨论】：

标签： html ios css mobile viewport

【解决方案1】：

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

【讨论】：

是的，我为高像素密度屏幕添加了一些，但仍然没有运气。
我把用过的放在上面
我不肯定这是否会有所帮助，但我的媒体查询是这样设置的。 @media screen and (max-width:640px) { /*-code-*/ }
是的，我也有这些，它们在桌面浏览器窗口中工作。只是移动设备的东西并没有融合在一起，这让我发疯了，哈哈

【解决方案2】：

链接- Responsive Design

文章一半多一点的信息我认为可能会有所帮助。

链接-Another Helpful Example

希望这会有所帮助。

【讨论】：

谢谢，我会试试这些链接。而且，我的页面顶部已经有。