1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Mobile Viewport Orientations initial-scale=1.0

Discussion in 'CSS' started by escocia1, Jan 13, 2014.

  1. #1
    http://sinfronteras.edu.mx/p7/fine5.htm
    (+ see 2 screenshots attached)
    responsive website design testing on iPad portrait & landscape orientations with viewport width=device-width
    portrait version shows perfectly what one would expect for 768px
    landscape version (1024px) shows a mimic of the narrow portrait version and ignores the media query
    effectively blowing up the content and disregarding the extra available horizontal space
    is this really a default iOS behaviour? or an iOS bug?
    most android tablets act perfectly well for both orientations
    initial-scale=1.0 has been suggested by some but highly frowned upon by others
    can we come to an agreement about this for the sake of our common mental health?
    [​IMG]
    [​IMG]
     
    escocia1, Jan 13, 2014 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    The people who have 'issues' with initial-scale usually don't know enough about designing for mobile to be running their yaps on the subject. Every page I design now includes the following in the markup:

    <meta
    	name="viewport"
    	content="width=device-width; height=device-height; initial-scale=1.0"
    />
    Code (markup):
    I had to add device-height since some android devices when rotated ignore width

    with this in my CSS:
    @media (max-width:600px) {
    	* {
    		-webkit-text-size-adjust:none;
    		-ms-text-size-adjust:none;
    	}
    }
    Code (markup):
    It's in a media query since sending this to desktop Safari prevents zoom controls from working -- herpaderp since mobile safari has no such issues!

    The reason we have to do this is simple -- mobile browsers don't actually expect websites to be designed for mobile, so they dick with the default font sizes and widths, lie about their widths and so forth. Using these is basically telling them "We know what we're doing, so don't screw around ignoring or overriding our settings"

    If you're gonna design for mobile, with elastic semi-fluid responsive design like we're ALL supposed to be doing, you will need to use the above values. Anyone who "frowns" upon that can do us all a favor and take a nice big helping of sierra tango foxtrot uniform. Basically anyone running their mouth that way doesn't know enough about the subject to be flapping their gums about it!

    Of course designing with dropdown menus and script-tard bullshit isn't exactly 'mobile friendly' either.
     
    deathshadow, Jan 16, 2014 IP
  3. escocia1

    escocia1 Active Member

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    66
    #3
    thanks for the reply

    are dropdown menus really not mobile friendly? i dont mind them myself. what would the alternatives be for large menus?
     
    escocia1, Jan 29, 2014 IP