Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
Like Tree2Likes
  • 2 Post By Ronald Roe

Thread: How do I code in Javascript for specific mobile or desktop screen dimensions

  1. #1
    Junior Member
    Join Date
    Jan 2016
    Posts
    11
    Member #
    52924

    How do I code in Javascript for specific mobile or desktop screen dimensions

    Every device has its own screen dimensions; how can I write javascript to check for the dimensions of a device visiting my page and set the max and min width of my page for these dimensions?

  2.  

  3. #2
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    You don't need to and you really shouldn't mainly because you can't rely on javascript being used on every device. The best way to do it would be by using responsive design. Like setting widths to %'s and using things like ems for text.


    Sent from my iPhone using Tapatalk

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Vapr is mostly right.

    There are some use cases for it though. Here's the quick and dirty version:
    HTML Code:
    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    I like to put everything in an object like so:
    HTML Code:
    function viewport(){
      this.w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
      this.h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
      
      this.orientation = w > h ? 'landscape' : 'portrait';
    
      this.output = {
        w: this.w,
        h: this.h,
        orientation: this.orientation
      };
    
      return this.output;
    }
    That'll allow you to call the function as necessary and use the values as needed. You can even run it on a resize event:
    HTML Code:
    window.onresize = function(){
      console.log(viewport()); //logs the whole object
      console.log(viewport().orientation); // logs just the current screen orientation
    }
    Boom. Responsive JS.
    Last edited by Ronald Roe; Jan 31st, 2016 at 08:35 AM.
    Vapr_Arts and AlphaMare like this.

  5. #4
    Junior Member
    Join Date
    Jan 2016
    Posts
    11
    Member #
    52924
    how can i do this with css

  6. #5
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    You can use CSS Media queries. Basically all you will do is specify different css for every size.

    Code:
    @media screen and (max-width: 980px) {
    
    CSS For 980px goes here
    
    }
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs




Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:47 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com