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

Question

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

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

e.g

这是移动屏幕尺寸的设计。

这是大屏幕的设计

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

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

我用Google搜索了，但没有找到任何运气。我还尝试了不同的媒体查询选项。有什么方法可以解决这个问题吗？

抱歉，我忘了提到我正在使用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 属性。

这样你就可以在

之间建立余量

  

姓名：Collette Simko

     

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挑选帧检测。

不完全是防弹的，取决于你使用哪些库，但肯定值得一试并且大部分工作。