文章/答案/技术大牛

发布

社区首页 >问答首页 >响应网站不使用平板电脑版本

问响应网站不使用平板电脑版本
EN

Stack Overflow用户

提问于 2015-04-26 14:08:50

回答 2查看 1.3K关注 0票数 0

我有一个反应网站，它可以很好地工作在桌面和移动版本，但在平板电脑版本，文本和图像不是在适当的位置，并移动到右侧，使它没有反应。

您可以在这里查看屏幕截图：https://dl.dropboxusercontent.com/s/835qg39vor9fhe9/websiteresponsive.JPG的链接

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

PS:当站点是在桌面的完全浏览器宽度打开时，这个问题不会发生，但是当你试图减少浏览器宽度，搜索栏和订阅框正在向右移动。

请您告诉我是否有任何CSS问题或是否存在javascript问题，我如何解决它？

responsive-design

javascript

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-04-26 15:17:43

修改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;
}

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

#menu-main {
  display: none;
}

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

现在你的网站会看起来好多了。:)

票数 0

Stack Overflow用户

发布于 2015-04-26 14:19:41

你的元视口错了。你应该用这样的方法：

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

您可以查看以下内容：https://css-tricks.com/snippets/html/responsive-meta-tag/

编辑:我以为你的网站在平板电脑/移动视图下无法运行。看看代码，#main-nav和其他几个元素的宽度在“tablet视图”中仍然固定在1000 at。我觉得你的媒体问询有问题。

编辑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;
    }
}

你现在看到问题了吗？您正在使导航1000 and宽的屏幕大小在726 and和1028 and之间。您应该使用width:100%或width:725px作为#main-nav的“平板版本”。现在，您只需要应用相同的原则，并检查您的网站的其他领域有同样的问题。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29878662

复制

相似问题

问响应网站不使用平板电脑版本
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问响应网站不使用平板电脑版本EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问响应网站不使用平板电脑版本
EN