Assumptions in your responsive CSS

[DelJo63]

I'm on a wide screen laptop and only rarely use fullscreen for productivity reasons. There is a point at which point narrowing the window size not only reduces the content (fully expected), but also specific functionality is withdrawn, eg drop down menus (unexpected consequence).

Clearly, the assumption that is in effect is screen size implies functional capability, eg screen width below X implies mobile device and thus absence of CLICK action.

The UA string of the browser has sufficient info to determine, phone, tablet else desktop.

As the web-geek users here are few to notice this, it's likely not reasonable to resolve the problem, but thought you ought to know.

 

[DelJo63]

Unfortunately, it can be hard to know if a user’s browser environment supports touch input or not; ideally, a browser on a desktop machine would always indicate support for touch events so a touchscreen display could be attached at any time (e.g. if a touchscreen attached through a KVM becomes available). For all these reasons, your applications shouldn’t attempt to switch between touch and mouse - just support both!

Handling clicks
Since calling preventDefault() on a touchstart or the first touchmove event of a series prevents the corresponding mouse events from firing, it's common to call preventDefault() on touchmove rather than touchstart. That way, mouse events can still fire and things like links will continue to work. Alternatively, some frameworks have taken to refiring touch events as mouse events for this same purpose.

 

[Julio Franco]

What part of the design in particular do you see as non-functional on your desktop with a window size below 1000-1100px? (that's when we switch to mobile for only some things, accounting for tablets, for example)

 

[DelJo63]

I gave the example of drop-down-menus disappear.

 

[Julio Franco]

Yes, that's by design

 

[DelJo63]

Consider: Touch screen PCs; Likely to miss the Touch behaviors on large screen devices. IMO, Behaviors should unique from screen size as clearly they are NOT related. Don't shoot the messenger.

Dell Inspiron 22"
Dell Inspiron-21.5" AIO

Dell Micro AIO​

Lenov-520

HP Pavillion 23.8"
HP Pavillion 27" AIO

Samsung-24" AIO
Asus Vivo 23.8" AIO​

 

[Julio Franco]

I think I'm not making my point across. Regardless of input method, once the site is too narrow for the drop down (things would look too tight), we suspend it and make the menu clickable, so you get a linked menu with no drop down. Are you seeing something different?

 

[DelJo63]

Linked to what? Regardless of width, Forums is always clickable, but when narrow, click leads to pure FORUMS listing.

Likely I'm not clear either -- I doubt touch screen systems actually support the Touch behaviors, but that's pure conjecture on my part.