How to write different HTML for different screen sizes

Question

I understood how I change CSS via media queries (such as media="screen and (max-width:640px)")

but let's say I want to write (just for example)

<div>
[if screen resolution is lower then 960 px]
    <div>
    some new text only for lower resolution
    </div>
[end of condition]
</div>

What is the condition I need to write to get it right?

I would suggest hiding that element with CSS, and then use media queries (which you are already using) to show it on lower resolutions. Is there any reason you aren't doing that? — Jan Hančič, Nov 28 '11 at 10:22
Is this to display something different depending on whether its a PC or mobile device? — Ash Burlaczenko, Nov 28 '11 at 10:25
The main goal is to seperate mobile from desktop. I just wanted to know if this is possible and if this is conventional. I guess by all the answers that it is best to do it with css — Alon, Nov 28 '11 at 10:42

score 9 · Accepted Answer · answered Nov 28 '11 at 10:23

9

As far as i have experienced, you cannot do media queries inside HTML pages. You need to do it from within your CSS.

But if you want to show some special text only when it is below a certain resolution, why not only make it visible when the resolution is lower than 960px?

Creating responsive designs is very different from a regular design, because you have to think a lot more (which is haaard)

answered Nov 28 '11 at 10:23

Jan Dragsbaek

8,078
2
26
46

I haven't thought of the display:none option - I think that should do the work – Alon Nov 28 '11 at 10:38

score 6 · Answer 2 · answered Nov 28 '11 at 10:25

you can check it via using javascript screen object :

screen.width

or you can do this with css

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

http://css-tricks.com/6206-resolution-specific-stylesheets/ http://www.javascriptkit.com/howto/newtech3.shtml

IPSDSILVA · Answer 3 · 2020-05-29T12:54:45.533

I am actually going through the same situation and found that if you want to do this you could really add all the text in the HTML page, and then hide it on screen widths that you don't want it to show. For example:


    <div>
    [text that will be shown for screens less or equal to 960px in width]
        <div class="smallScreen">
        some new text only for lower resolution
        </div>
    [end of condition for small screens]

    [text that will be shown for other screens that are greater in width]
        <div class="largeScreen">
        some new text only for higher resolution
        </div>
    </div>

And then you could add CSS:

    /* On smaller resolutions, hide the text for Large screens */
    @media only screen and (max-width: 960px) {
        .largeScreen {display: none;}
   }

   /* On larger resolutions, hide the text for Small screens */
    @media only screen and (min-width: 960px) {
        .smallScreen {display: none;}
   }

I hope this works out fine :)

score 4 · Answer 4 · answered Nov 28 '11 at 10:24

4

You need to assign an id (or a class or any other way of finding your element from CSS) to the <div> and then you can set a media query definition like this:

<div id="mydiv">...</div>
<style type="text/css">
@media screen and (min-width: 961px) {
   div#mydiv { display: none }
}
</style>

Or for better readability: Make it hidden on default and visible if max-width: 960px.

answered Nov 28 '11 at 10:24

Till Helge

9,253
2
40
56

It doesn't *have* to be an ID, it can be anything to allow the OP to target the element. I suspect I'd use a class so that I could put more than one of these on a page if I wanted to. – T.J. Crowder Nov 28 '11 at 10:26
True. It just looked so specific that I thought an ID to be the best choice...but yeah...a class or just a tag hierarchy would also work if the circumstances allow it. – Till Helge Nov 28 '11 at 10:27

score 1 · Answer 5 · answered Mar 21 '13 at 08:20

You can add jQuery function to change style dynamically as per scree resolution.

if(screen.width==1600)
       { 
        jQuery('#hb-gotop').removeAttr("margin-left", "-0.9");
        jQuery('#hb-gotop').attr('style', 'margin-left: -0.7%');
       }
        else if(screen.width==1280)
       { 
        jQuery('#hb-gotop').removeAttr("margin-left", "-0.9");
        jQuery('#hb-gotop').attr('style', 'margin-left: -0.9%');
       }    
       else if(screen.width==1024)
       { 
        jQuery('#hb-gotop').removeAttr("margin-left","-0.9");
        jQuery('#hb-gotop').attr('style', 'margin-left: -1.1%');
       }
        else if(screen.width==800)
        { 
        jQuery('#hb-gotop').removeAttr("margin-left","-0.9");
        jQuery('#hb-gotop').attr('style', 'margin-left: -1.3%');
       }

score 1 · Answer 6 · edited May 23 '17 at 11:46

Answere was helpful from:

if screen resolution is less than x append css

You can do this entirely with CSS 3 using the @media command.

**@media (max-width:960px) { css... } //nothing with screen size bigger than 960px

@media (min-width:960px) { css... } //nothing with screen size smaller than 960px**

Jason Whitted makes a good point, this is CSS 3 only, so it won't work with older browsers (it should work with all modern browsers though). You can as well do screen or device edit

@media screen { .nomobile { display: block; } } //desktops/laptops

@media handheld { .nomobile { display: none; } } //mobile devices Or you could assume mobile devices will have a smaller width, and go on that.

score 1 · Answer 7 · answered Nov 28 '11 at 10:27

I could be wrong, but I think css selection by resolution would need a little help from javascript.

Here is a quick example of what that js could look like, embedded in jquery:

$(document).ready(function() {

  if ((screen.width>=1024) && (screen.height>=768)) {
   alert('Screen size: 1024x768 or larger');  
   $("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"});
 }
  else  {
    alert('Screen size: less than 1024x768, 800x600 maybe?');
    $("link[rel=stylesheet]:not(:first)").attr({href : "detect800.css"});
  }
});

Hope that helps.

How to write different HTML for different screen sizes

7 Answers7