Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts

    @media query for mobile phones ignored when form field is selected

    I am used the @media query to create a responsive website. When I am viewing the page it responds nicely to all devices. However, when viewing on a mobile phone, whenever a form field is selected it appears the device ignores at @media specifications that I have. It doesn't happen with tablets or desktops only mobile phones, and it only happens when the form field is clicked.

    Code:
    @media only screen and (min-width:200px) and (max-width:720px) and (orientation:landscape){}

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Posts
    103
    Thanks
    5
    Thanked 17 Times in 17 Posts
    You do have this or something like this in your HTML
    Code:
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width" />
    ?
    True courage is about knowing not when to take a life, but when to spare one. PDO Tutorial

  • #3
    New Coder
    Join Date
    Aug 2008
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts
    yes, I have this
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

  • #4
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    375
    Thanks
    9
    Thanked 55 Times in 54 Posts
    Do you have a link to that we all could see?

  • #5
    New Coder
    Join Date
    Aug 2008
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts

    link

    Quote Originally Posted by hdewantara View Post
    Do you have a link to that we all could see?
    yes sure.

    Burlington School of English Online Test Registration

  • #6
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    375
    Thanks
    9
    Thanked 55 Times in 54 Posts
    Can't check with real device though, sorry

    With Firefox's Responsive View, I see that all your CSS rules under:
    Code:
    @media only screen and (min-width:200px) and (max-width:720px) and (orientation:landscape){}
    look okay to me. No reason for an iPhone device to ignore them...

    Except maybe at this line 308:
    Code:
    #wrapper{
      width:800px;
    }
    THere are also several rules inside that same media-query above, which specify a width of 700px,
    which I think are not quite flexible. Use percentage width perhaps?

    Hendra
    Last edited by hdewantara; 04-30-2014 at 09:19 PM. Reason: added some [code]...

  • #7
    New Coder
    Join Date
    Aug 2008
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hdewantara View Post
    Can't check with real device though, sorry

    With Firefox's Responsive View, I see that all your CSS rules under:
    Code:
    @media only screen and (min-width:200px) and (max-width:720px) and (orientation:landscape){}
    look okay to me. No reason for an iPhone device to ignore them...

    Except maybe at this line 308:
    Code:
    #wrapper{
      width:800px;
    }
    THere are also several rules inside that same media-query above, which specify a width of 700px,
    which I think are not quite flexible. Use percentage width perhaps?

    Hendra
    Thank you very much for your time, I will have a look into the width. it only ignores it when the form field is selected otherwise it renders well


  •  

    Posting Permissions

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