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
    126
    Thanks
    5
    Thanked 20 Times in 20 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" />
    ?

  • #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
    425
    Thanks
    10
    Thanked 62 Times in 61 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
    425
    Thanks
    10
    Thanked 62 Times in 61 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 08: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
    •