How to show mobile screen design on large screen size?

Question

I am having an issue while switching a design between devices. I know that css3 @media queries are use to handle on the bases of device width, orientation etc.

As far as concern with the device size css media queries are working perfectly fine when am on large screen size or on mobile screen size.

e.g

This is the design for mobile screen size.

and this is the design for large screen

the media queries are working fine to switch the design. But i want to show the mobile screen design on desktop screen when the parent div size is small e.g equals to mobile screen size?

In the below situation i need to shown the mobile screen design on desktop screen size.

I googled it but didn't find any luck. I also try with different options of media queries. Is there any way to resolve this issue?

Sorry I forget to mention that am using foundation framework for responsive design.

Answer 1

Media queries target the screen. Let's suppose you have the following structure:

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

If you check the width with media query, you are essentially checking the screen width. However, if you check the width:

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

and you add a class based on the size:

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

and you call the function for the parent of your element:

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

then, you can design .large and .small, like this:

.large div {
    /*your rules*/
}

.small div {
    /*your rules*/
}

Answer 2

You can not link your media queries to the div size.

The usual way to handle this is to link them to screen-width, and set the div width to some percentage of the screen width.

Now, you only need to do some math ..

The basic issue here is that you should do a variable/responsive design for all your page, not only the list

Answer 3

I have not used foundation framework. But in media query you can give condition of screen max width :

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

// write your code here of css for mobile device

}

Now , suppose if u want make differentiate with mobile device or large device you can use width property for both of them in css.

So that you can make margin between

name : Collette Simko

Events by Collete

Answer 4

You can always use an iframe to display the page on your development version, instead of altering your browser settings. Might make it easier for universal testing as well.

---

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
}

---

We use this technique at work when doing Facebook applications, works very well for testing and no need to resize your window all the time – can see both sizes simultaneously and everything works on both ends.

If you are using jQuery, you might as well do something like the following (use the CSS code above in conjunction with this).

---

JavaScript (jQuery implementation)

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

---

Frame detection picked from this Stack Overflow answer.

Not exactly bulletproof, depends which libraries you use, but certainly worth a shot and works for the most part.