SoylentNews is people
SoylentNews
This was hard and annoying to figure out. So I thought I should tell the internet in case it helps anyone else.
Basically I wanted to know if people were viewing my website on a small screen*
A quick summary of the problems:
- Many mobile devices lie about dpi, screen size, and window size, whether you check with css media-queries or javascript.
- Different browsers report different size numbers on the same device.
- Screen-width (in pixels) doesn't tell you anything about the physical screen size. Several high-end phones have more pixels than your average laptop.
- There is no (supported) standard way to just ask a browser "are you on a phone"
- I don't like using user-agent-strings as it's ugly (you need to keep a big list) and unreliable (users can change or remove it).
- I don't like feature checking for a lot of non-standard browser apis with various prefixes to search for the information. It's ugly, and I don't want to play along with browsers that ignore the standards. We should be past that by now.
This solution is simple. It's not perfect but it seems to work on all of the many devices and browsers I've tested. However I've dealt with web-browsers long enough to know I might have missed something. Any feedback is welcome.
Summary solution:
1 - Set a normal "viewport" meta tag. This is pretty standard and (should) only affect mobile browsers.
2 - Check if the browser is taking up the full screen.
3 - Read the virtual (css-pixels) width of an element that takes up the full window-width.
On probably 99% of smart phones, the browser takes up the full screen. So if you have an element that takes up the full-width of the window, it can tell you how (virtually) big the screen is. Then you can decide whether it's big enough to include a desktop-style interface.
Details:
1 - <meta name="viewport" content="width=device-width, initial-scale=1.0">
2 - if ((outerWidth == screen.width) || (innerWidth > outerWidth)) Then you're in fullscreen. That second conditions is a kludge to make it work on iphones who choose not to make the outerWidth work.
3 - <div style='position:absolute; left:0px; right:0px;'> </div> Read the .offsetWidth of this div and it will tell you the virtual/viewport width of the document. Even in portrait mode almost all phones will be less than 700. Virtually no laptops or desktops will. If you have a small-screen netbook or tablet in portrait mode then it might fall below this threshold. Of course you can use a lower threshold depending on your purpose.
Hope this helps. If it seems overly complicated, I'd like to see a simpler solution (really).
----------------------------
*The best interface for a desktop is not the best interface for a phone and vice versa. There have been many, ridiculous attempts to make a single unified interface which usually end up showing as many useful features on a desktop screen as you can reasonably fit on a phone.
(Score: 1) by elixir on Tuesday December 15 2015, @11:17PM
I am pretty sure that user-agent strings are the standard way to to ask a browser "are you on a phone." The average user probably does not know what a user-agent string is, let alone how to override or change it.
I do not think that you would need to keep a big list of user-agent strings if you were to implement this idea. I feel you could run some sort of switch statement where you implement the supported browsers and devices and have a default setting for anything other than the most common devices and browsers.
Just a thought :)
(Score: 2) by prospectacle on Tuesday December 15 2015, @11:46PM
You could do that and it's probably a popular approach, but it's less accurate for a few reasons*
Checking the viewport size if the browser is fullscreen is simple and doesn't care what new devices are released. If what you want to know is "how much effective space do I have to work with" then it's faster, easier, more accurate, and more resilient to change than a list of user-agents.
*Reasons I think it's substantially less accurate to check user-agent.
- The number of less-common browsers and devices are still quite numerous when you put them all together.
- If you try to guess based on operating system, device name, browser, etc, then you will probably fail on smaller tablets, or lower resolution tablets with a low effective page size, or phones plugged into bigger screens as many of them can be.
- You're right that not many people would delete the user-agent, I don't bother myself, but some do for privacy reasons as it can (depending on pluging, etc) contain enough information to identify you uniqely across different sites. That seems legitimate. Far fewer people would hack their browser to report false width values. The exception is if they set their browser to "Request desktop site" in which case that's ok, they'll get what they asked for.
- New devices keep coming out. We might be moving towards a future where people routinely connect their small, mobile device into a bigger screen and keyboard. Or we might be moving somewhere else. Relying on known lists of current types won't handle change as easily.
If a plan isn't flexible it isn't realistic