SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Mobile media types?

    Just done a site which looks pretty funky on mobile devices (using media="screen" seems to get it to ignore the web styling nicely). To get it looking "extra-special", I'd like to include a small "mobile sized" logo, but only have it appear on mobile devices. Most logical way seems to be to have a "hidden" div which is only not hidden to mobs, but how to correctly assign the stylesheet?

    tia,

    H
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  2. #2
    SitePoint Zealot itsyM's Avatar
    Join Date
    Jul 2002
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TheOriginalH
    Just done a site which looks pretty funky on mobile devices (using media="screen" seems to get it to ignore the web styling nicely). To get it looking "extra-special", I'd like to include a small "mobile sized" logo, but only have it appear on mobile devices. Most logical way seems to be to have a "hidden" div which is only not hidden to mobs, but how to correctly assign the stylesheet?

    tia,

    H
    Hmm. Your XHTML could be something like this:

    Code:
    <div id="logo-mobile">
    <img src="images/logo_mobile.gif" alt="Blah" />
    </div>
    Your CSS could look like this (add to your old stylesheet):

    Code:
    #logo-mobile {
      display: none;
    }
    This way a normal web browser should not display anything, but a mobile device would show the logo DIV. I think

  3. #3
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks itsyM - that should work...but it would be kind of a hack. I suppose I could add the display:hidden to the NS4 .css sheet as well, but I'm at mercy of media types. I suppose if I do a decent "print" version then the only option left is mobile...I just don't want to miss any device that isn't "screen" or "print" and have it messed up by an erroneous image.

    Thanks for the suggestion. Totally logical, and should no more concise solution present itself, will be the one I use
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Most mobile browsers aren't up to par with CSS yet (the most notable exception being Opera on the Sony P800). itsyM's suggestion is the most likely to work reliably among various mobile browsers.

  5. #5
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Furry muff.

    The phone it was tested on actually did import the .css (it's the DJ site you've seen). I added the media="screen" rule and it behaved itself (not importing). I was hoping that a media="mobile" (or whatever) rule may be usable so I could style the header appropriately rather than using an "extra" div ... ah well.
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS


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
  •