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

Vel Louise 发表于 Dev

路易斯（Louise）

我有一个被动式网站，在台式机和移动版上都可以正常工作，但在平板电脑版上，文本和图像不在适当的位置，并且朝右侧移动，使其无响应。

您可以在此处查看链接以获取屏幕快照：https : //dl.dropboxusercontent.com/s/835qg39vor9fhe9/websitesensitive.JPG

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

PS：当以桌面上的完整浏览器宽度打开网站时，不会发生此问题，但是当您尝试减小浏览器宽度时，搜索栏和订阅框将向右移动。

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

在Sree Harissh

更改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- 15/04/15删除第1208行的以下行：

#menu-main {
  display: none;
}

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。