Announcement

Collapse
No announcement yet.

Search field zoom-in problem

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Search field zoom-in problem

    When testing Miva's Shadows demo site search field from different iPhones sizes and resolutions (Safari or Firefox), that it zooms-in to focus on search field, but it never zooms-out forcing users to pinch-in browser window to view site width at 100% each time a search is performed. This can't be intentional. Is there a setting of fix for this?
    Thank you, Bill Davis

    #2
    Hi Bill,

    This is an ongoing issue with iOS. If the input isn't specifically able to be read to be using a font size of 16px, the input element will be zoomed in. From my testing an research, many iOS users have learned this is a common issue and how to deal with it. However, if you would like your site to not do this, you could specify a 16px font size in the c-form-input class.
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      Originally posted by Matt Zimmermann View Post
      Hi Bill,

      This is an ongoing issue with iOS. If the input isn't specifically able to be read to be using a font size of 16px, the input element will be zoomed in. From my testing an research, many iOS users have learned this is a common issue and how to deal with it. However, if you would like your site to not do this, you could specify a 16px font size in the c-form-input class.
      So the way the problem was avoided with Colossus was by using a font size equal or greater that 16px?
      Thank you, Bill Davis

      Comment


        #4
        Hi Bill,

        Correct. You might also try to adjust the font only on focus:
        Code:
        input[type='email']:focus,
        input[type='number']:focus,
        input[type='password']:focus,
        input[type='search']:focus,
        input[type='tel']:focus,
        input[type='text']:focus,
        select:focus,
        textarea:focus {
            font-size: 16px;
        }
        Matt Zimmermann

        Miva Web Developer
        Alchemy Web Development
        https://www.alchemywebdev.com
        Site Development - Maintenance - Consultation

        Miva Certified Developer
        Miva Professional Developer

        https://www.dev4web.net | Twitter

        Comment

        Working...
        X