如何在大屏幕尺寸上显示移动屏幕设计？

问题描述：

我在设备之间切换设计时遇到问题。我知道css3 @media查询是用来处理设备的宽度，方向等的基础上。如何在大屏幕尺寸上显示移动屏幕设计？

只要关心设备的大小CSS的媒体查询工作完全正常，当我在大屏幕尺寸或手机屏幕尺寸。

例如

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

enter image description here

，这是大屏幕 enter image description here

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

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

我GOOGLE了一下，但没有找到任何运气。我也尝试用媒体查询的不同选项。有什么办法可以解决这个问题吗？

对不起，我忘记提及，我正在使用foundation响应式设计框架。

您可以使用谷歌浏览器的仿真器或调整窗口大小（也许）@media少比在调整窗口大小时会起作用 – frunkad 2015-02-12 08:06:57

您使用设备宽度还是屏幕宽度？ – atmd 2015-02-12 08:10:22

与Darshan的答案类似，在Firefox中，您可以从开发人员工具获得响应式设计模式。按F12，在右上角有一个叫做“Responsive Design Mode”的按钮。 – Suppen 2015-02-12 08:10:50

答

媒体查询以屏幕为目标。让我们假设你有以下结构：

<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*/ 
}

答

您无法将媒体查询链接到div大小。

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

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

这里的基本问题是，你应该为所有的页面做一个变量/响应式设计，不但列表

如何使用iframe（如@Petroff在评论中提到的那样）？这是一个好方法吗？ – 2015-02-12 08:19:14

如果它不会以您处理页面的方式产生问题，那么使用iframe是一种好方法。但很可能它会在某处出现问题。无论如何，Petroff的答案更关系到在制作 – vals 2015-02-12 08:36:39

的发展情况下做的，你是对的，我尝试使用iframe，它引发了角度范围的问题。我想我必须去解决你的问题。 – 2015-02-12 08:46:13

答

您可以随时使用在您的开发版本上显示页面的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 
}

我们使用这种技术，在工件W在做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采摘。

不完全是无懈可击的，取决于你使用的库，但肯定值得一试，大部分工作。

问题不在于测试响应式设计（你知道大多数浏览器为此提供开发人员工具？），而是根据周围div的大小切换设计。 – amon 2015-02-12 09:08:08

答

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

@media屏幕（最大宽度：320像素）{

//写你的代码在这里的CSS，对于移动设备

}

现在，假设如果你想与移动设备或大型设备区分你可以使用宽度属性为他们在CSS中。

这样就可以使利润率之间

名称：由Collete活动科莱特SIMKO

如何在大屏幕尺寸上显示移动屏幕设计？

相关推荐