Mobile Display on Desktop

Stationery Direct

Administrator
Staff member
Had a couple of customers over the last couple of months mention that they are getting a mobile display on one of our websites when viewing on desktop, any ideas what I should be looking at?
 
I've seen it happen before when using my mobile hotspot as a the internet - it sometimes calls the mobile version of the site, as perhaps the connection is slow or being interpreted as being a mobile device.

That's all I can think of...
 
Looking at your stylesheet it seems as though media queries which form the break point between mobile and desktop are set with em rather than px. Using em for breakpoints doesn't make a lot of sense as it isn't an absolute value, it's defined by the font size selected by a users browser/operating system. Its very possible that the users experiencing problems have systems with unusual font settings.

Another possibility is that they are using a laptop/device with a small screen which is causing the breakpoints to fire.


**EDIT**
I've just downloaded your css file and it looks as though the main css is actually using px for media queries, its the foundation css file that using em. This could be affecting how the site is displayed but it's less likely as breakpoints are being defined with px so should be rendering correctly regardless of a users settings.

I would therefore assume that the users are viewing the site on a small screen/browser window.

Does the site just use media queries for responsive layout or is there some script detecting screen size?
 
Last edited:
Could also be they've zoomed in as well, if you zoom in on most modern browsers they adjust the 'screen resolution' now rather than act like a magnifying glass. Using firefox when I zoom in (Ctrl + +) to about 200% zoom range it's using the mobile site with the hamburger menu.

The people having issues may need to press ctrl + 0 to reset the zoom to 100% to get the desktop version.
 
It breaks at about 1000px. A lot of people don't view using a full screen browser which means they will see the hamburger. You don't need to ever use the hamburger as you only have 5 links in the menu. These will easily fit on a sticky header (which you don't have but should).

There are a gazillion other things you could do to improve the UX/UI. But that's a different discussion.
 
In Chrome, Firefox and Firefox Mobile is a responsive layout that varies depending on width. The measurement of webpage width (window.innerWidth) in Firefox 22 and later is different than in earlier versions because it is adjusted based on the zoom level, as part of Firefox's becoming a "DPI-aware" application. 1260 physical monitor pixels will be reported as a lower number if your zoom level is higher than 100%. For example, if the zoom level is 125%, it is reported as 1050 CSS layout pixels.
 
Back
Top