Announcement

Collapse
No announcement yet.

Mobile usability issues

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

  • Mobile usability issues

    Received mail, from Google quoting these issues -
    1. Content wider than screen
    2. Clickable elements too close together
    3. Text too small to read
    4. Viewport not set

    To reproduce #1 -

    install VB and load homepage on an iPhone 6s. The screen expands beyond phone boundaries.

    Pinch to zoom out and fit the screen horizontally. Refresh the page - the screen expands beyond the boundaries again.

  • #2
    This doesn't happen on a default installation. If you edit templates you have to make sure every element on the page adjusts at the set breakpoints. Otherwise, you will have elements that extend beyond their containers, issues with margins and padding, blocks of text that are not responsive, and viewport errors.

    By default the viewport is set to width=device-width. Height is auto maintaining aspect ratio. That code is hard-coded into the head of every page. You can easily see it exists by viewing the page source.

    Comment


    • #3
      Originally posted by In Omnibus View Post
      This doesn't happen on a default installation. If you edit templates you have to make sure every element on the page adjusts at the set breakpoints. Otherwise, you will have elements that extend beyond their containers, issues with margins and padding, blocks of text that are not responsive, and viewport errors.

      By default the viewport is set to width=device-width. Height is auto maintaining aspect ratio. That code is hard-coded into the head of every page. You can easily see it exists by viewing the page source.
      I am referring to default installation without any customizations - the page expands beyond iPhone’s boundaries. I tested this with v5.6 on another dev site with default installation and verified.

      #2 and #3 maybe related to my site. Not sure about #4.

      Comment


      • #4
        Originally posted by webcms View Post

        I am referring to default installation without any customizations - the page expands beyond iPhone’s boundaries. I tested this with v5.6 on another dev site with default installation and verified.

        #2 and #3 maybe related to my site. Not sure about #4.
        Which version of iOS is your phone using? I have an iPhone 6 Plus that I use to access vBulletin 5.6 and I am unable to reproduce the same errors from Google.

        Comment


        • #5
          Originally posted by In Omnibus View Post

          Which version of iOS is your phone using? I have an iPhone 6 Plus that I use to access vBulletin 5.6 and I am unable to reproduce the same errors from Google.
          iOS 12.

          But the issue is also reported by Google and so, my phone and iOS version should not matter.

          Comment


          • #6
            When visiting your site, I cannot recreate the issue you're stating when using with simulations. Even using Google's testing tools. I understand this isn't perfect but we do not do device detection. We do viewport and capability detection so any device with the same viewport size should work the same. I do not have access to an actual iPhone 6s device at the moment.

            Is this device using iOS 13 and Safari to access the site?
            Looking at your site, I can't see any obvious issues. However, have you changed any of the widths?
            Translations provided by Google.

            Wayne Luke
            The Rabid Badger - a vBulletin Cloud demonstration site.
            vBulletin 5 API - Full / Mobile
            Vote for your favorite feature requests and the bugs you want to see fixed.

            Comment


            • #7
              I tested a vanilla install on a dev subdomain without making any changes or customizations using Chrome. Even on my live site, there are no customizations affecting widths.

              Here is a video showing an issue (after page load, there seems to be a cursor in a field in the header that disappears after tapping the Done and closing the keyboard) -



              No issues found using Safari. Google owns Chrome and so, they would validate sites using Chrome.

              HTH
              Last edited by webcms; Today, 9:54am.

              Comment

              Related Topics

              Collapse

              Working...
              X