user2260526 user2260526 - 11 months ago 73
CSS Question

iOS safari random resize and scroll issue

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){
executeFunction = setTimeout(function() {
}, timeToExecute);

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

html, body { height: 100% !important; }

Answer Source

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

    font-size:16px !important;

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