css 响应式网站无法在平板电脑版本上运行

k97glaaz  于 2022-12-15  发布在  其他
关注(0)|答案(3)|浏览(175)

我有一个resposive网站,在桌面和移动的版本的工作很好,但在平板电脑版本,文本和图像不在适当的地方,并向右侧移动,使其无响应。
您可以查看此处的链接以获取屏幕截图:https://dl.dropboxusercontent.com/s/835qg39vor9fhe9/websiteresponsive.JPG
这是我的网站:http://www.sociolife.co.in/
PS:当网站在桌面上以浏览器全宽打开时,这个问题不会发生,但当你试图减少浏览器宽度时,搜索栏和订阅框会向右移动。
请你能告诉我,如果有任何CSS的问题或有任何JavaScript的问题,我该如何解决它?

mpbci0fu

mpbci0fu1#

你的 meta视图是错误的。你应该使用类似这样的东西:

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

你可以看看这个:https://css-tricks.com/snippets/html/responsive-meta-tag/
编辑:我以为你的意思是你的网站在平板电脑/移动的视图下无法运行。看看代码,#main-nav的宽度,可能还有其他几个元素在“平板电脑视图”下仍然固定在1000 px。我认为你的媒体查询有问题。
编辑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 px到1028 px之间的屏幕尺寸的导航设置成了1000 px宽。你应该用width:100%或者width:725px作为你的#main-nav的“平板版本”。现在你只需要应用同样的原则,检查你网站的其他区域是否有同样的问题。

dojqjjoe

dojqjjoe2#

更改您的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;
}

将以下代码行添加到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;
                }
        }

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

xwmevbvl

xwmevbvl3#

  • 这个很好用。
@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;
         }
 }

相关问题