www.webdeveloper.com
Results 1 to 3 of 3

Thread: Different definitions, same result

  1. #1
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,410

    Question Different definitions, same result

    I have created the following CSS style tag.
    Code:
    <style type="text/css">
    @media print { body { font-size: 16pt } }
    @media screen, print { body { line-height: 1.2 } }
    
    @media screen {
     body { font-size: 1.2em; }
    
     .btn { font-size:1.2em; width:18%; }
     .btnAct { font-size:0.8em; width:18%; }
     #kbrd { width:30%; } 
     border:3px solid blue;
    }
    
    @media handheld {
     body { font-size: 1.5em; }
    
     .btn { font-size:1.2em; width:18%; }
     .btnAct { font-size:0.8em; width:18%; }
     #kbrd { width:90%; } 
    }
    </style>
    I thought I would be getting two different keyboard (#kbrd) displays, one for the desktop screen and a larger one for the handheld device.

    What appears to be happening is that only the first #kbrd definition is being recognized
    as each device appears to be taking up 1/3 of the display.

    Am I doing something wrong with the definitions.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,147
    I'm just starting with mobile, too, and it seems that smart phones and tablets don't obey @handheld settings. Every site is different, but you might consider @max-width or @orientationortrait.

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,410
    Thanks, I'll check those out.
    Appreciate the direction to look.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles