Callin a js script from the <head> to decide on screen width

JavaScript
1

Hi

I’ve just had a long chat in the “Mobile” forum and the suggestion to solve my problem about screen width was to use js. I know nothing about js but found a little script

<script>
function myFunction() {
    var x = "Total Width: " + screen.width + "px";
    document.getElementById("demo").innerHTML = x;
}
</script>

What I would like to do is how to call it from the html

. At the moment I have <meta name="viewport" content="width=1000">

in my test page http://pintotours.net/Work/NewPage.html

Thank you

2

Can you please clarify exactly what you want to do?

Do you want the width of the screen? Or the view port? or an html element?

What do you want to do with this width?

3

Hi

In the page I am doing I have a media query for max-width 500px and it works fine for me. The page also displays good. However, I tried to do a media query for intermediate widths (like tablet) and gave up with many problems I don’t know how to solve.

So, I enquired in “Mobiles” about using a meta tag to display for tablets, while keeping the media query for 500 px.

Tha advice I got was to use a js script (that’s worse than Chinese to me!). I saw some scripts on the Web but don’t know what to do them to achieve what I want…

4

I’m still not really sure what you are trying to achieve specifically. Perhaps if you give us some HTML it will clarify things a little.

Otherwise from what I understand, perhaps this might help? http://www.htmldog.com/guides/css/advanced/mediaqueries/
It is CSS, but really, presentational things should be done with CSS rather than JavaScript, where ever possible.

5

RT, this is what he wants.

He wants to apply the meta tag example below

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

ONLY IF the screen size is 500px or higher. So pseudo code is below

if(screen.size>500)
 //meta tag

I dealt with him in hte mobile forum. Don’t bother asking why he wants this: I tried convincing him to make his website responsive but he doesn’t wnat to do the mobile aspect…he’d rather the website shrink down (default device behavior) for 500px and below.

6

Hi

If you look at “View Source” (IE) of the page in question http://pintotours.net/Work/NewPage.html you can see that I have alreday coded media queries for max 550px. That means that right now I have apage that looks ok to me in a full PC screen and ok (modified) for small screens (mobiles)
However, I do not have a ccess to a tablet and, for the time being, I would be happy if the FULL page displayed, even if it looks very small.

If you look in a MOBILE at another page that does not have media queries nor meta viewport http://pintotours.net/Europe/Spain/Barcelona.html the page display fully even if it looks tiny.

What I want id for the page above to adapt to any screen above the 500px that were reserved for mobiles.

Sorry if I don’t make much sense.

PS - Maybe easier to understnad if you read the earlier thread in Mobile

http://www.sitepoint.com/community/t/is-it-possible-to-have-meta-name-viewport-and-ignore-media-queries/104959/24
7

It is certainly possible to manipulate the DOM based on the dimensions of the viewport, if that’s what you mean.

Here’s an example that changes the background colour of the page:

0px - 500px > blue
501px - 950px > red
950+px > yellow

If you try resizing your browser, you’ll see the colour change accordingly.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery viewport demo</title>
  </head>

  <body>
    <p id="dimensions">Viewport: <span></span></p>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
      function updateViewportDimensions(w, h){
        $("p#dimensions span").text(w + "x" + h)
      }

      function setBackgroundColour(w){
        if(w<500){
          $("body").css("background", "blue");
        } else if (w>500 && w < 951){
          $("body").css("background", "red");
        } else {
          $("body").css("background", "yellow");
        }
      }

      $(window).on("resize", function() {
        var viewportWidth = $(window).width(),
            viewportHeight = $(window).height();

        updateViewportDimensions(viewportWidth, viewportHeight);
        setBackgroundColour(viewportWidth);
      });

      $(window).trigger("resize");
    </script>
  </body>
</html>

Is that the kind of thing you’re looking for?

8

Hi Pullo

I don’t know if you looked at the page in question but media queries are already in place for max-width 300px and max-width 500px to target mobiles

My proble is that I want to target tablets also and unfortunately the way my page is set up with fixed sidebard makes the job of assigning a media query for say max-width 1000px pretty difficult and beyond my capabilities

What I am looking for is a way of keeping what I have but make sure that tablets will see the full page as if there wasn’t a meta viewport.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.