如何在不打开新浏览器窗口的情况下在手机,平板电脑和台式机上显示页面

时间:2014-11-18 01:59:15

标签: javascript responsive-design

我正在做一个允许用户构建页面的Web应用程序。除了构建页面之外,我还需要在手机,平板电脑和桌面上显示页面的外观,而无需用户实际打开不同视口大小的浏览器以查看其外观。

以下是我计划如下页面的内容:

  1. 该页面分为两部分。

  2. 顶部包含三个标记为手机,平板电脑和桌面的按钮

  3. 下半部分显示实际的用户页面。

  4. 点击任何按钮将在下半部分显示用户页面在与按钮所代表的类型对应的设备类型上的样子。

    我知道我必须使用Javascript进行此实现,但我不知道从哪里开始。

    非常感谢任何想法/链接/指示。

    谢谢和问候。

1 个答案:

答案 0 :(得分:0)

在Chrome中,您可以通过打开开发人员工具并点击左上角放大镜旁边的电话图标来模拟任何尺寸/屏幕尺寸。以下是一些解释它的文档https://developer.chrome.com/devtools/docs/device-mode