0

First of all the head contains this code

 <meta name="viewport" content="width=device-width, initial-scale=1">

I'm using this simple javascript code to get window width to append some files if width is less than 79px

$(document).ready(function(){
   document.body.style.overflow = "hidden";
   var viewportWidth = $(window).innerWidth();
   document.body.style.overflow = "";
   alert(viewportWidth);
     if(viewportWidth<979){
        alert('welcome');
     }
  });

and use this simple css code in the main css file for Phones

 @media (max-width: 480px) {
   body{background: pink;}
}

The problem is on PC (with the window re-sized as a Phone) the alert shows 303px then the page alerts 'welcome' but alerts 980px on Phone and tablet and does not alert 'welcome'. The background changes to pink on PC but does not change at all on Android Phone or tablet Where that difference come from and how to fix it?

PHP User
  • 1,748
  • 2
  • 29
  • 58
  • some phones and tablets have high resolution so doing a media query for smaller screen sizes to target them won't work. Have a look at this post for a better way to detect phone and tablets http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery – Pete May 12 '15 at 12:33
  • [link]http://stackoverflow.com/a/13550716/4019425[/link] There is some info on different view sizes, is your android device 480px? might try set a range, as provided in the answer en also play with the max-device-width and device-width. good luck – Ignotus May 12 '15 at 12:37
  • @Pete you might have to update that solution after a while if new devices come out. Had that problem 2 years ago with an website i made for someone. – Ignotus May 12 '15 at 12:39
  • @Ignotus, yeah we pay for a service that actually keeps an up to date list of devices and their viewport sizes but I didn't really want to be pushing people off to paid services as it could be clased as spam – Pete May 12 '15 at 12:47

1 Answers1

1

Often an easier way to ensure media Queries and JS fire at the same time, is to not back your if statement on screen size, but rather off a CSS condition which is only true at the smaller size. This ensures consistency.

Your alert wouldn't fire at 980 either since that is not less than 979. As for not changing the background to pink, are you sure that you are viewing in less than 480px? You say it changes to pink on PC but according to that media statement, it shouldn't at anything over 480px.

Callum.
  • 146
  • 11
  • Yes i'm sure it works on the home page only but on other pages media query does not work nor javascript which means it gets the home page width correctly but not other pages – PHP User May 12 '15 at 12:44
  • If the Javascript is within your home page, it wouldn't fire in your other pages. Similarly if you have only linked your CSS file to the home page, that might explain why it doesn't work on other pages? – Callum. May 12 '15 at 12:46
  • JS code is in the footer of all pages and it fires but alerts the wrong window size before the if statement and the css code is in the main css file included in all pages – PHP User May 12 '15 at 12:47
  • I think I get you now. You will need to include this line as well `$(window).resize(viewportWidth = $(window).innerWidth())`. This will update your variable on screen size changes, since at the moment you are only initialising the variable on load of the page. – Callum. May 12 '15 at 12:51
  • didn't get the correct width at all even css code still functioning of the home page not other pages. Still wondering why other pages display the wrong width – PHP User May 12 '15 at 13:04
  • How far off are the widths you are getting? – Callum. May 12 '15 at 13:18
  • on Phone the home page alerts 320px other pages alert 980px and css still the same works on home page not on other pages – PHP User May 12 '15 at 13:30
  • On the other pages, are you hiding elements using display:none; or are you setting a width anywhere in the css to 980px? – Callum. May 12 '15 at 14:01
  • No I don't and if I did I would face this problem on PC while re-sizing the browser window – PHP User May 12 '15 at 14:18
  • I think this problem then lies with the viewport meta you have set, as 980 is a default size. Try adding `@-ms-viewport{width: device-width;}` to your css and let me know if this makes any changes. – Callum. May 12 '15 at 14:47
  • setting meta tag with min and max worked after clearing the cache Thanks a lot every body. Thank you Callum. – PHP User May 13 '15 at 09:13