#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    44
    Rep Power
    2

    IPad text size in responsive sites


    Hi all,

    I think that the correct behaviour for text on a responsive site is that a line should wrap (ie begin a new line) according to the width available in the browser / screen.

    But it seems to me that my iPad follows this correct behaviour on some responsive sites but not others.

    Here are two random responsive sites that behave correctly when my iPad switches between landscape and portrait:

    http://tinyurl.com/2lehxe
    http://tinyurl.com/q2uq789


    Here is a random responsive site that does not behave correctly when my iPad switches between landscape and portrait ie rather than wrapping the text size changes.

    http://tinyurl.com/qj22frh

    Can anyone with an iPad please check these three links to see if you get the same behaviour as me?

    Do you agree that the ge site is not behaving correctly in the iPad?

    I have some sites that are behaving incorrectly like the ge site in my iPad and I am hoping there is some CSS that will correct this. I could give some more responsive site examples and I have seen some in which the text size in the iPad is stupidly big in landscape and stupidly small in portrait. This is very annoying because I want the text size to remain constant not jump around.

    Thanks...
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    29
    Rep Power
    0
    Your answer is in the <head> tag.

    The Maine.gov site you list has this:
    Code:
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    While the GE.com site has this:
    Code:
    <meta content="width=device-width" name="viewport">
    Many mobile devices, including iPad, automatically scale text unless the website tells them not to, because there are so many sites that don't take mobile devices or small screens into account, and scaling often works better on these sites. Sites that are designed to be responsive can set the "viewport" meta tag accordingly.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    44
    Rep Power
    2
    Originally Posted by LindaJeanne
    Your answer is in the <head> tag.

    The Maine.gov site you list has this:
    Code:
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    While the GE.com site has this:
    Code:
    <meta content="width=device-width" name="viewport">
    Many mobile devices, including iPad, automatically scale text unless the website tells them not to, because there are so many sites that don't take mobile devices or small screens into account, and scaling often works better on these sites. Sites that are designed to be responsive can set the "viewport" meta tag accordingly.
    OK thanks. The GE site is responsive so would you say they have set the viewport meta tag incorrectly? Or maybe although it seems strange to me, some responsive site designers actually want the text to scale up and down in this way.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    29
    Rep Power
    0
    The scaling is the default behavior, unless it's over-ridden in the viewport meta tag, as above. So, if someone doesn't think about whether they want it to scale on small screens or not, it will scale.

    Like you, I prefer the other behavior, but allowing it to scale isn't "wrong", per se.

    It's the iPad that's doing the scaling, not the website -- the website just hasn't told it "hey, don't do that."
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    44
    Rep Power
    2
    Originally Posted by LindaJeanne
    The scaling is the default behavior, unless it's over-ridden in the viewport meta tag, as above. So, if someone doesn't think about whether they want it to scale on small screens or not, it will scale.

    Like you, I prefer the other behavior, but allowing it to scale isn't "wrong", per se.

    It's the iPad that's doing the scaling, not the website -- the website just hasn't told it "hey, don't do that."
    Sorry for the delay - I don't think I got an email notification to say there was a reply.

    Anyway thanks. I wonder if this is just an iPad thing - I am going to check my Android tablet to see how that behaves...

IMN logo majestic logo threadwatch logo seochat tools logo