css - 在移动设备上显示与台式机完全相同的响应式网站

标签 css twitter-bootstrap responsive-design

我对以下网站有疑问

www.tylkomarkowa.pl

基本上它是响应式的 (BS 3.0),但带有大量自定义查询。我想从该站点删除所有响应,但这很困难。所以我想知道是否有任何方法可以强制移动设备显示完整的网站,所以它看起来就像在桌面上一样,没有 div 堆叠等。

我已经尝试过 viewport width=1200 和更高,但它根本不起作用。我想在手机上有 1200px 的容器,即使需要水平滚动也是如此。任何想法?谢谢。我卡住了。我也试过固定容器的宽度,但它也不起作用。

最佳答案

首先,从网站中删除响应是一个糟糕的主意。它将对 SEO 产生前所未有的巨大影响,因为 4 月 21 日的 Google 更新将非常重视您的网站的移动友好性。

既然我已经说明了这一点,我将向您展示可以用来删除此功能的几个步骤。

首先,从任何 webkit 浏览器打开调试控制台,然后转到 sources 选项卡。从那里,点击 Ctrl+Shift+F 以允许您搜索所有源文件。输入“@media”,它会列出所有 @media query {} 的场合 - 这是所有响应魔法发生的地方。

我添加了一个屏幕截图,以便您查看结果。从这里您可以看到出现了 327 次。这将需要很长时间才能摆脱,但这是让网站成为令人头疼的移动问题的第一步。

然后,就像您的直觉告诉您的那样,您必须保持视口(viewport)宽。这似乎就像在 global.css 中将 min-width: 240px 更改为 min-width: 1200px 一样简单6689.

这应该是您要搞砸移动访问者体验的全部或大部分工作:) 希望对您有所帮助!

enter image description here

关于css - 在移动设备上显示与台式机完全相同的响应式网站,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29317701/

相关文章:

html - 尽管未能满足媒体查询,但 css 文件始终加载

css - 如何在媒体查询中使用 > 或 <(大于和小于)符号

javascript - Jquery 中的简单测试不起作用。绿色方 block 不显示

twitter-bootstrap - 如何将react-bootstrap与postcss-module和react-css-module一起使用?

css - 如何在不定义像素高度的情况下用背景色填充标题?

html - 拉伸(stretch)一个 div 使其与其下方 2 个 div 的宽度之和相匹配

javascript - 如何从 JavaScript 外包 HTML 标签?

javascript - Bootstrap 3按钮下拉列表显示列表项

html - 如何在完全响应式网站中强制使用滚动条?

html - 背景图片响应高度