Question

我有一个可在桌面版和移动版上正常使用的转发网站，但在平板电脑版本上，文字和图片不在适当的位置，向右侧移动，使其无法响应。

您可以点击此处的链接查看截图： 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的宽度以及可能的其他几个元素在“平板电脑视图”中仍然固定为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;
    }
}

你现在看到问题了吗？您的导航宽度为1000px，屏幕尺寸介于726px和1028px之间。您应该使用width:100%或width:725px作为#main-nav的'平板电脑版'。现在您只需要应用相同的原则并检查您网站中具有相同问题的其他区域。

Answer 2

更改html文件：在源代码的第1195行更改wiz。

#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;
}

edit- 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;
                }
        }

现在您的网站看起来会更好。：）

响应式网站无法使用平板电脑版本

2 个答案: