Fatal编程技术网
  • html/
  • Html 在不调整浏览器窗口大小的情况下预览Bootstrap 3作为手机和平板电脑的网格布局？

Html 在不调整浏览器窗口大小的情况下预览Bootstrap 3作为手机和平板电脑的网格布局？

html twitter-bootstrap responsive-design

Html 在不调整浏览器窗口大小的情况下预览Bootstrap 3作为手机和平板电脑的网格布局？,html,twitter-bootstrap,responsive-design,Html,Twitter Bootstrap,Responsive Design,有没有一种方法可以在不调整浏览器窗口大小的情况下预览引导网格平板电脑视图和手机视图？ 我想提供预览按钮“预览为平板电脑”和“预览为手机”。从本页获取脚本并将其拖到书签栏中： 如果你不喜欢这个，你还有几个选择： 编辑： 您还可以在页面上创建一个包含href的链接= javascript:(function(d){if(d.getElementById('bm_resizer')){return}var%20scriptNode=d.createElement('script');scriptNod

有没有一种方法可以在不调整浏览器窗口大小的情况下预览引导网格平板电脑视图和手机视图？
我想提供预览按钮“预览为平板电脑”和“预览为手机”。

从本页获取脚本并将其拖到书签栏中：

如果你不喜欢这个，你还有几个选择：

编辑：

您还可以在页面上创建一个包含href的链接=

javascript:(function(d){if(d.getElementById('bm_resizer')){return}var%20scriptNode=d.createElement('script');scriptNode.src='http://branneman.github.com/resize-browser-window-bookmarklet/bookmarklet-resizer.js';d.body.appendChild(scriptNode)}(document));
单击此链接将打开一个弹出窗口，您可以从中选择浏览器大小

这也适用于以上所有提供书签的网站。这个和上面的不同之处在于它不使用iframe。

我设法想出了一个使用简单css的有效解决方案

.media-320, .media-480, .media-600, .media-800, .media-768, .media-1024 { background: #666; }
.media-320 body, .media-480 body, .media-600 body, .media-800 body, .media-768 body, .media-1024 body {margin: auto;background: white;position: relative;overflow: hidden; top:50px}

.media-320 body { width: 320px; height: 480px}
.media-320 .main-wrapper, .media-320 .container {width:320px}

.media-480 body { width: 480px; height: 320px}
.media-480 .main-wrapper, .media-480 .container {width:480px}

.media-600 body { width: 600px; height: 800px}
.media-600 .main-wrapper, .media-600 .container {width:600px}

.media-800 body { width: 800px; height: 600px}
.media-800 .main-wrapper, .media-800 .container {width:800px}

.media-768 body { width: 768px; height: 1024px}
.media-768 .main-wrapper, .media-768 .container {width:768px}

.media-1024 body { width: 1024px; height: 768px}
.media-1024 .main-wrapper, .media-1024 .container {width:1024px}

.media-320 div[class^="col-sm-"] , .media-480 div[class^="col-sm-"], .media-600 div[class^="col-sm-"] { float: none;margin-left: 0;margin-right: 0; width:100%}
然后手动或动态编辑html标记，使其

<html class="media-320">
或

等等

Catalin，感谢您的回复。但是它们都在iFrame中加载页面。我想在同一实际页面上提供预览按钮移动、选项卡、桌面，我不想在iFrame中加载页面。你解决过这个问题吗？我想做同样的事情有一个预览按钮平板电脑/电脑/手机没有戴夫。我把它搁置了一段时间，因为我正忙于其他项目。如果您找到了解决方案，请让我知道：我最后做的是用window.open打开一个新窗口，传递大小信息并调用window.resizeTo和window.focus（如果window.open已被调用且窗口尚未关闭）。不完全是我想要的，但它可以工作。另一种方法是将网站放置在iFrame中，并根据需要调整iFrame的大小。但这也不是我想要的戴夫，请看下面我的答案。。 
<html class="media-600">