0

I am developing a website for desktop and mobile view. but when I test my mobile view on iOS Safari I encounter the following error

  1. on the mobile page there is a dropdown for user to select to jump to certain section of the page, on iOS when user select on the drop down, Safari will auto zoom in to the page. i would like to check how do i prevent this
  2. on iOS Safari, when user tried to scroll the page where the html table cover almost the whole page, they will not be able to scroll the page. the user would have to try to touch on the certain section of the page where the table is not covering. i.e when user try to scroll on the page and they touch on the table they will not be able to scroll upwards or downwards

for my 1st question I tried adding the following JS in the document ready function but it is not helping

$(window).resize(function() {
  if($(window) !== windowWidth){
      clearTimeout(executeFunction);
      executeFunction = setTimeout(function() {
         fn(variable);
      }, timeToExecute);
  }
});

for my 2nd question I tried the following CSS but seems to not be helping

html, body { height: 100% !important; }
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • Please ask two questions. Your zoom question is likely a duplicate of http://stackoverflow.com/questions/6483425/prevent-iphone-from-zooming-in-on-select-in-web-app which was easily found – mplungjan Sep 25 '16 at 06:41
  • hi mplungjan. i am aware of the solution. i apologise for not being cleared. using that fix would result into user not able to zoom on the browser on mobile which is not ok. i only want to disable to auto zooming by iOS Safari – user2260526 Sep 26 '16 at 01:24

1 Answers1

0

i am able to fixed my auto zoom option by setting the min font size of the dropdown list to 16px since safari will auto zoom when font size is less than 16px

#ddlNavigation,
#ddlNavigation:focus{
    font-size:16px !important;
}

for my html table scrolling i used niceScroll.js and it managed to fixed my issue