SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mobile text inputs reload the page on "focus"

    I have a site that I am converting to mobile, I know it's not best to attack it this way, but I have no choice. Anyway, there is a search box at the top of the page that when clicked in from a mobile device (Android) seems to reload the page with the desktop screen version of the page instead of just zooming into the text input for input entry. What should I do to prevent this from happening? It ONLY happens on mobile (Android) devices as far as I can tell. Here is a link to my page.

    https://edit-wwwprep.rose-hulman.edu...ncial-aid.aspx

    It seems to only be a problem on devices running Android. IOs focuses on the textfied as it should. What should I check?

  2. #2
    SitePoint Mentor NightStalker-DNS's Avatar
    Join Date
    Jul 2004
    Location
    Cape Town, South Africa
    Posts
    2,878
    Mentioned
    47 Post(s)
    Tagged
    0 Thread(s)
    hmmm. This is very strange behavior. How do you handle the switching between mobile and desktop version of the site?

    One thing to take note of, I just tested your site. The problem exists as you describe it, but only in the default android browser. Work perfectly fine in Chrome

  3. #3
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by NightStalker-DNS View Post
    hmmm. This is very strange behavior. How do you handle the switching between mobile and desktop version of the site?

    One thing to take note of, I just tested your site. The problem exists as you describe it, but only in the default android browser. Work perfectly fine in Chrome
    I use:
    <link rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width:1280px)" href="/css/mobile.css" type="text/css" />
    <link rel="stylesheet" media="screen and (min-device-width: 768px) and (max-device-width:1024px)" href="/css/tablet.css" type="text/css" />
    <link rel="stylesheet" media="all and (device-aspect-ratio: 9/16)" href="/css/mobile.css" type="text/css" />

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    London
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was just about to post a thread with the exact same problem, but for me it is iPad 4 doing it on my form fields, but it works fine for me on iPad 3! Link is:

    http://www.casinodemonstration.com/html5/?guest=1

    The problem is in the login form field(s).. I can't reproduce the problem myself on iPad 3 but people are telling me its refreshing the page when they click on the form fields. And I'm using DHTMLX Touch.
    Chuck
    --------------------------
    Add Poker Tables to your Website
    http://www.PlugInPoker.com

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by svoltmer View Post
    there is a search box at the top of the page that when clicked in from a mobile device (Android) seems to reload the page with the desktop screen version of the page instead of just zooming into the text input for input entry.
    You are kind of asking for trouble by having the "Search" word as a link:

    Code:
    <a href="/search.aspx">Search</a>
    I would re-think that if I were you. People on mobile devices have to click that link to be able to see the actual search box. You are relying on the device behavior to decide what to do if someone touches that link. You may be lucky if the dropdown works on iOS, but it would seem Android just does the usual thing and follows the link.

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    London
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found the problem.. On android and iPad 4 (not iPad 3), the ONRESIZE event was getting fired whenever someone types in my input fields. Not sure where exactly the problem stems from but I'm using DHTMLX TOUCH api. I'm binding to the windows onresize to resize and refresh the components on the screen. If I comment out the resize binding, it works fine, if I put it back, android/ipad4 can't type anymore. Now the trick is how to fix it...

    Quote Originally Posted by svoltmer View Post
    I have a site that I am converting to mobile, I know it's not best to attack it this way, but I have no choice. Anyway, there is a search box at the top of the page that when clicked in from a mobile device (Android) seems to reload the page with the desktop screen version of the page instead of just zooming into the text input for input entry. What should I do to prevent this from happening? It ONLY happens on mobile (Android) devices as far as I can tell. Here is a link to my page.

    https://edit-wwwprep.rose-hulman.edu...ncial-aid.aspx

    It seems to only be a problem on devices running Android. IOs focuses on the textfied as it should. What should I check?
    Chuck
    --------------------------
    Add Poker Tables to your Website
    http://www.PlugInPoker.com


Tags for this Thread

Bookmarks

Posting Permissions

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