Cross-platform web design

Cross-browser, and cross-platform

Cross-browser compatibility
Chrome Device Mode - mobile emulator
- Do not actually run on mobile, but on emulator.
- Chrome DevTools - Ctrl-Shift-J
- Mobile/Tablet icon in top LHS
- Top menu has options like rotate icon

Detect what the browser supports

Detect old browsers in JS and display messages:
- Modernizr uses feature detection rather than browser detection. See docs.

Usage of Modernizr is like:


<script src="modernizr.js"></script>  

<script>

 if ( ! ( Modernizr.flexbox && Modernizr.flexwrap ) ) 
 {  
   myWarning ( "Warning: Your browser does not support Flexbox."  ); 
   // maybe redirect to a help page, etc.
 }

</script>

Mobile web design

Responsive Web Design
w3schools
- Responsive Web Design
- Responsive Web Design

Solution with HTML and CSS

You can have the same site for both mobile and desktop using HTML and CSS alone (no JS).
Use the following:

<meta name=viewport in head
Flexbox ("display: flex;") for any wide content sections - put them into divs in a row and let them wrap
"overflow-x: auto;" horizontal scrollbar for content that cannot wrap (table, pre)
CSS gives all img a max-width: by default
element widths use "vw" rather than absolute dimensions or "%"
Checklist of wide things:
- wide images
- wide tables
- wide iframes (like YouTube)
- wide <pre> sections

Other solutions

There are many other approaches.

@media (CSS media query) can define CSS different for different devices.
<link media= can load entire different CSS file depending on device.
separate mobile.css
separate mobile pages

Probably don't:

Server detect client using HTTP_USER_AGENT
JS on client-side detect client

Examples (my sites):

Designed for mobile:
https://ancientbrain.com/
Not designed for mobile:
https://humphryscomputing.com/
(Evolved over time from my original 1994 site. Endless changes, but needs further rewriting.)

Different content on mobile

If you want to provide less or different actual content to the mobile site.
Could ask user to click on "mobile site" but maybe that is awkward.
Can provide all content to page, in hidden div's, and then client side CSS or JS unhides some div's.
Any other ways of doing it?

JS detect mobile

How can JS on the client detect mobile or desktop?

window.orientation

A one-liner trick people have used is to look for window.orientation:

  if ( typeof window.orientation == "undefined" )     // then we are on desktop

One problem is there are "in-between" devices - large tablets, laptops with touch screens. Do you want "mobile" layout on those too?
Perhaps a worse problem is window.orientation is deprecated in favour of window.screen.orientation. But the latter normally exists on desktop, so it is not clear if it can be used to detect mobile.
On this device (that you are using right now):

window.orientation =
window.screen.orientation =
There is lots of debate on this, and many complex solutions detecting specific clients. Is there any other one-liner solution?