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

Question

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

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

例如

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

这是大屏设计

媒体查询可以很好地切换设计。但我想在父 div 尺寸较小时在桌面屏幕上显示手机屏幕设计，例如等于手机屏幕尺寸？

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

我用谷歌搜索但没有找到任何运气。我也尝试使用不同的媒体查询选项。有什么办法可以解决这个问题吗？

抱歉，我忘记提及我正在使用 foundation 响应式设计框架。

Answer 1

您不能 link 您的媒体查询到 div 大小。

通常的处理方法是 link 它们为屏幕宽度，并将 div 宽度设置为屏幕宽度的某个百分比。

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

这里的基本问题是您应该 variable/responsive 设计所有页面，而不仅仅是列表

Answer 2

您始终可以使用 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 应用程序时会在工作中使用这种技术，非常适合测试并且不需要一直调整 window 的大小 – 可以同时看到两种大小并且两端都可以正常工作。

如果您正在使用 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 中选取的帧检测。

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

Answer 3

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

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

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

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

然后你根据大小添加一个class：

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 4

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

@media 屏幕和（最大宽度：320px）{

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

}

现在，假设您想要区分移动设备或大型设备你可以在 css.

中对它们都使用 width 属性

这样您就可以在

之间赚取利润

name : Collette Simko

Events by Collete

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

How to show mobile screen design on large screen size?

html

javascript

css

media-queries