Results 1 to 2 of 2

Thread: Specify touch screen specific stylesheet

  1. #1
    Join Date
    May 2014
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default Specify touch screen specific stylesheet

    Is there anyway to detect user interface in CSS media queries? I have a few divs that feature small clickable icons to interact like the up/down arrows in this scollable div (http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm) and the left/right arrows in this photo gallery (http://www.dynamicdrive.com/dynamici...ider/index.htm) On small screens (eg phones) the icons are too small to be functional without zooming, and it occurred to me redundant on any touchscreen device so would like to style them independently depending on interface... if touchscreen hide buttons completely and replace with a note eg "Swipe to scroll" if mouse pointer fancy icons with hover effect, (and possibly although not as important) if keyboard simple icons with no effects.

    Hopefully this is the right thread! I figured CSS since it is a media query I'm trying to implement, but I haven't been able to find a query that relates to this so guessing it will need to be a combination of css and javascript?

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    With CSS media queries you can detect things like width, height, pixel density, aspect ratio, and even luminosity, but unfortunately you cannot detect touch.

    On small screens (eg phones) the icons are too small to be functional without zooming
    You can increase the icon size at small screen widths. I'm not sure if you're using a mobile-first or desktop-down approach, which will affect how you write the media queries.

    For mobile-first you would write something like this in your stylesheet;
    Code:
    .icon { width:2em; height:2em } /* default, mobile-first styles */
    
    ...
    
    @media ( min-width:37.5em ) { /* desktop override styles - bigger than 600px */
    	.icon { width:0.5em; height:0.5em }
    }
    But for desktop-first, you'd write something like this instead;
    Code:
    .icon { width:0.5em; height:0.5em } /* default, desktop styles */
    
    ...
    
    @media ( max-width:37.5em ) { /* mobile override styles - smaller than 600px */
    	.icon { width:2em; height:2em }
    }
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    Neil1 (05-26-2015)

Similar Threads

  1. Navigation problem on touch screen devices
    By k1w1boy in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 01-10-2015, 03:13 AM
  2. Top level navigation menu links on touch screen devices
    By k1w1boy in forum Looking for such a script or service
    Replies: 0
    Last Post: 12-29-2014, 08:13 AM
  3. Slick Custom Scrollbar on Touch Screen Device
    By cynde in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-06-2014, 11:31 AM
  4. Replies: 1
    Last Post: 06-27-2013, 05:39 PM
  5. Touch Screen Kiosk webpage help!
    By magic in forum JavaScript
    Replies: 0
    Last Post: 05-28-2009, 02:57 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •