如何在大屏幕尺寸上顯示移動屏幕設計？

我在設備之間切換設計時遇到問題。我知道css3 @media查詢是用來處理設備的寬度，方向等的基礎上。如何在大屏幕尺寸上顯示移動屏幕設計？

只要關心設備的大小CSS的媒體查詢工作完全正常，當我在大屏幕尺寸或手機屏幕尺寸。

例如

這是移動屏幕尺寸的設計。

enter image description here

，這是大屏幕 enter image description here

媒體查詢工作正常切換設計的設計。但是，我想在桌面屏幕上顯示移動屏幕設計，當父div大小很小，例如等於手機屏幕大小？

在以下情況下，我需要在桌面屏幕尺寸上顯示移動屏幕設計。 enter image description here

我GOOGLE了一下，但沒有找到任何運氣。我也嘗試用媒體查詢的不同選項。有什麼辦法可以解決這個問題嗎？

對不起，我忘記提及，我正在使用foundation響應式設計框架。

來源

2015-02-12 Faheem Alam

您可以使用谷歌瀏覽器的仿真器或調整窗口大小（也許）@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*/ 
}

來源

2015-02-12 08:33:00

您無法將媒體查詢鏈接到div大小。

處理此問題的常用方法是將它們鏈接到屏幕寬度，並將div寬度設置爲屏幕寬度的某個百分比。

現在，你只需要做一些數學..

這裏的基本問題是，你應該爲所有的頁面做一個變量/響應式設計，不但列表

來源

2015-02-12 08:17:37 vals

如何使用iframe（如@Petroff在評論中提到的那樣）？這是一個好方法嗎？ – 2015-02-12 08:19:14

如果它不會以您處理頁面的方式產生問題，那麼使用iframe是一種好方法。但很可能它會在某處出現問題。無論如何，Petroff的答案更關係到在製作 – vals 2015-02-12 08:36:39

的發展情況下做的，你是對的，我嘗試使用iframe，它引發了角度範圍的問題。我想我必須去解決你的問題。 – 2015-02-12 08:46:13

-1

您可以隨時使用在您的開發版本上顯示頁面的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採摘。

不完全是無懈可擊的，取決於你使用的庫，但肯定值得一試，大部分工作。

來源

2015-02-12 08:20:34 ascx

問題不在於測試響應式設計（你知道大多數瀏覽器爲此提供開發人員工具？），而是根據周圍div的大小切換設計。 – amon 2015-02-12 09:08:08

我沒有使用過基礎框架。但在媒體查詢，你可以給屏幕最大寬度的條件：

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

//寫你的代碼在這裏的CSS，對於移動設備

}

現在，假設如果你想與移動設備或大型設備區分你可以使用寬度屬性爲他們在CSS中。

這樣就可以使利潤率之間

名稱：由Collete活動科萊特SIMKO

來源

2015-02-12 08:39:55

如何在大屏幕尺寸上顯示移動屏幕設計？

回答

相關問題