响应式网站不适用于平板电脑版本

Question

我有一个响应式网站，它在桌面版和移动版上运行良好，但在平板电脑版上，文本和图像不在适当的位置并向右侧移动，使其无响应。

你可以在link这里查看截图： https://dl.dropboxusercontent.com/s/835qg39vor9fhe9/websiteresponsive.JPG

这是我的网站：http://www.sociolife.co.in/

PS: 当站点在桌面上以全浏览器宽度打开时，不会出现此问题，但是当您尝试减小浏览器宽度时，搜索栏和订阅框会向右移动。

你能告诉我是否有任何 CSS 问题或是否有任何 javascript 问题，我该如何解决？

Answer 1

您的元视口有误。你应该使用这样的东西：

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

你可以看看这个：https://css-tricks.com/snippets/html/responsive-meta-tag/

编辑：我以为您的意思是您的网站无法在平板电脑/移动设备视图中运行。查看代码，#main-nav 的宽度可能还有其他几个元素在 'tablet view' 中仍然固定为 1000px。我认为您的媒体查询有问题。

编辑 2：根据您的 CSS，这里有一些相关代码（我以 #main-nav 为例，您可以检查其他受影响的元素）：

@media only screen and (max-width: 1028px){
    #main-nav{
        width:1000px;
    }
}
@media only screen and (max-width: 725px){
    #main-nav{
        width:430px;
    }
}

你现在看到问题了吗？对于 726 像素到 1028 像素之间的屏幕尺寸，您正在将导航宽度设为 1000 像素。您应该为 #main-nav 的 'tablet version' 使用 width:100% 或 width:725px。现在你只需要应用相同的原则并检查你网站的其他区域是否有相同的问题。

Answer 2

您的 html 文件中的更改：在您的源代码的第 1195 行更改向导。

#main-nav {
width: 1000px;
}

改为：

#main-nav {
width: 103%;
}

第 1201 行：

.column-right-outer{
width:320px;
float:left;
}

到下面的代码：

.column-right-outer{
display: none;
}

在第 1204 行更改：

.column-center-outer{
width:670px;
border-right: 0px solid #eaeaea;
}

对此：

.column-center-outer{
width:620px;
border-right: 0px solid #eaeaea;
}

编辑- 27/04/15 删除第 1208 行的以下行：

#menu-main {
  display: none;
}

在 HTML 文件的单独 <style></style> 标记中添加以下代码行。

 @media only screen and (min-width: 730px) and (max-width: 1028px){
            #menu-main {
             margin-top: -10px;
            }

                #main-nav ul li {
                  z-index: 20;
                  text-transform: uppercase;
                  font-family: Oswald,arial,Georgia, serif;
                  font-size: 12px;
                  position: relative;
                  display: inline-block;
                  float: left;
                  border: 1px solid;
                  border-width: 0 0 0 1px;
                  height: 50px;
                }
        }

现在您的网站看起来会好很多。 :)

响应式网站不适用于平板电脑版本

Responsive Website not working on Tablet version

html

javascript

css

responsive-design