如何在大屏幕上显示手机屏幕设计？

Question

我在设备之间切换设计时遇到问题。我知道 css3 @media 查询用于根据设备宽度、方向等进行处理。

就设备尺寸而言，css 媒体查询在大屏幕尺寸或移动屏幕尺寸上工作得非常好。

例如

这是针对手机屏幕尺寸的设计。

这是大屏幕的设计

媒体查询可以正常切换设计。但是当父 div 尺寸较小时，我想在桌面屏幕上显示移动屏幕设计，例如等于移动屏幕尺寸？

在以下情况下，我需要在桌面屏幕尺寸上显示移动屏幕设计。

我用谷歌搜索了它，但没有找到任何运气。我还尝试了不同的媒体查询选项。有没有办法解决这个问题？

对不起，我忘了提到我正在使用foundation 框架进行响应式设计。

Answer 1

媒体查询以屏幕为目标。假设您有以下结构：

<div id="foo">
    <div id="bar">
    </div>
</div>

如果您使用媒体查询检查width，您实际上是在检查屏幕width。但是，如果您检查width：

function isLarge(element, limit) {
    return element.width() >= limit;
}

然后根据大小添加一个类：

function addSizeClass(element, limit) {
    element.addClass(isLarge(element, limit) ? "large" : "small");
}

然后您为元素的父级调用 function：

addSizeClass($("#bar").parent(), 700);

那么，你可以设计.large和.small，像这样：

.large div {
    /*your rules*/
}

.small div {
    /*your rules*/
}

Answer 2

您不能将媒体查询链接到 div 大小。

处理这个问题的常用方法是将它们链接到屏幕宽度，并将 div 宽度设置为屏幕宽度的某个百分比。

现在，你只需要做一些数学运算..

这里的基本问题是您应该为所有页面进行可变/响应式设计，而不仅仅是列表

Answer 3

我没有使用基础框架。但在媒体查询中，您可以给出屏幕最大宽度的条件：

@media screen and (max-width: 320px) {

// 在此处编写移动设备的 css 代码

}

现在，假设您想区分移动设备或大型设备 您可以在 css 中同时使用 width 属性。

这样你就可以在

之间留出余量

姓名：科莱特·西姆科

Collete 举办的活动

Answer 4

您始终可以使用 iframe 在您的开发版本中显示页面，而不是更改您的浏览器设置。也可能使通用测试更容易。

---

JavaScript

function iframe( ) {
    try { return window.self !== window.top; }
    catch( e ) { return true; }
}

if ( !iframe( ) ) {
    theParent = document.getElementsByTagName( "body" )[ 0 ];
    theIframe = document.createElement( "iframe" );
    theIframe.className = "smallScreen";
    theIframe.src = "http://example.com/"; // Replace the address with your site address
    theParent.insertBefore( theIframe, theParent.firstChild );
}

---

CSS

iframe.smallScreen {
    position: absolute;
    z-index: 1000;
    border: 1px solid #000000;
    height: 800px;
    width: 500px;
    right: 500px;
    top: 50px
}

---

我们在做 Facebook 应用程序时使用这种技术，非常适合测试，无需一直调整窗口大小 - 可以同时看到两种尺寸，并且两端都可以正常工作。

如果您使用的是 jQuery，您不妨执行以下操作（结合使用上面的 CSS 代码）。

---

JavaScript （jQuery 实现）

function iframe( ) {
    try { return window.self !== window.top; }
    catch( e ) { return true; }
}

if ( !iframe( ) )
    $( "body" ).prepend( '<iframe class="smallScreen" src="http://example.com/" />' ); // Replace the address with your site address

---

从this Stack Overflow answer 中挑选的帧检测。

不完全是防弹的，取决于您使用的库，但肯定值得一试并且在大多数情况下都可以工作。