我有一个resposive网站,在桌面和移动的版本的工作很好,但在平板电脑版本,文本和图像不在适当的地方,并向右侧移动,使其无响应。
您可以查看此处的链接以获取屏幕截图:https://dl.dropboxusercontent.com/s/835qg39vor9fhe9/websiteresponsive.JPG
这是我的网站:http://www.sociolife.co.in/
PS:当网站在桌面上以浏览器全宽打开时,这个问题不会发生,但当你试图减少浏览器宽度时,搜索栏和订阅框会向右移动。
请你能告诉我,如果有任何CSS的问题或有任何JavaScript的问题,我该如何解决它?
3条答案
按热度按时间mpbci0fu1#
你的 meta视图是错误的。你应该使用类似这样的东西:
你可以看看这个:https://css-tricks.com/snippets/html/responsive-meta-tag/
编辑:我以为你的意思是你的网站在平板电脑/移动的视图下无法运行。看看代码,#main-nav的宽度,可能还有其他几个元素在“平板电脑视图”下仍然固定在1000 px。我认为你的媒体查询有问题。
编辑2:基于你的CSS,这里有一些相关的代码(我以#main-nav为例,你可以检查其他受影响的元素):
你现在明白问题所在了吗?你把726 px到1028 px之间的屏幕尺寸的导航设置成了1000 px宽。你应该用
width:100%
或者width:725px
作为你的#main-nav
的“平板版本”。现在你只需要应用同样的原则,检查你网站的其他区域是否有同样的问题。dojqjjoe2#
更改您的html文件:在源代码的第1195行更改wiz。
将其更改为:
在第1201行:
以下代码:
在第1204行更改以下内容:
更改为:
编辑- 27/04/15删除第1208行的以下行:
将以下代码行添加到HTML文件的单独
<style></style>
标记中。现在你的网站看起来会好多了。:)
xwmevbvl3#