2

I have a web page that I am trying to make "friendly" to touch devices. With the proliferation of devices with medium sized screens (small tables, large phones) my approach is to make one responsive layout with CSS and javascript tweaks where necessary. This is going pretty well, but I'm wrestling with select controls.

On my android phone and android tablets, the browsers that I've tested render a friendly large dialog when I touch a select control (I still need to test an Apple device), but on a Windows 8 touchscreen laptop, I am left trying to click the little select options. Other than just making the select control a very large font, is there already an established way to make the select more friendly?

I'm thinking of detecting ontouchstart then creating a pop up div with buttons or styled hyperlinks to give an experience like that provided by Android - but then I'd need to disable this on browsers that already handle select controls well...

Anyone have any advice? (I don't have any code yet, and this would apply to any select control)

Aerik
  • 2,307
  • 1
  • 27
  • 39
  • https://github.com/harvesthq/chosen or https://github.com/ivaynberg/select2 or https://github.com/brianreavis/selectize.js – dandavis Nov 07 '13 at 20:52
  • I'm on windows 8, and in IE10+ and firefox nightly metro edition the select boxes are bigger than normal, and so are the options in the select. Other, non-touch based browsers for windows 8 will not have this functionality, but the two I mentioned are the only two "touch-optimized" win8 browsers that I know, and they work without additional help. – markasoftware Nov 13 '13 at 03:38

1 Answers1

0

The most friendly way to deal with controls is to not touch them at all. Let the browser handle them the best way it can — unless you're providing extra functionality like you can with Chosen.js

Usually, yes, setting a larger font size would help. http://css-tricks.com/dropdown-default-styling/

fregante
  • 29,050
  • 14
  • 119
  • 159