I'm getting seriously frustrated with this program. This is really a continuation of my last topic: how to make my program behave correctly on a tablet? For the moment I have limited testing to my own equipment i.e. a small Samsung tablet running Google Chrome for Android. The performance so far has been very dysfunctional. I have spent hours trying to find fixes. I have now more or less eliminated the unwanted appearances of the virtual keyboard. I have made some other progress too. Initially nothing worked because functions were being executed more than once with disastrous consequences. I think this was caused mainly by mousedown and mouseup events so I have taken most of these out and replaced them with click. Have you ever experienced this?
I am now trying to tackle zooming and scrolling problems.
Zooming: when the user fills in an input the whole page is zoomed to a ridiculous extent as described here https://www.dynamo6.com/thoughts/prevent-unwanted-mobile-zooming/ So I first tried setting the fontsize to 16 px but this made no difference. I then tried using the code example at the bottom. Surprisingly it worked! Half of it, that is. The problem is the zoomDisable function works but not the part to re-enable zooming. zoomDisable() does enlarge the size of the TB page somewhat but I could live with that I guess. The problem is, once zooming is disabled it never comes back! I've copied the code here because there were some problems with line-breaks in the original.
- Code: Select all
var $objHead = $( 'head' );
// define a function to disable zooming
var zoomDisable = function() {
$objHead.find( 'meta[name=viewport]' ).remove();
$objHead.prepend( '<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />' );
};
// ... and another to re-enable it
var zoomEnable = function() {
$objHead.find( 'meta[name=viewport]' ).remove();
$objHead.prepend( '<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" />');
};
// if the device is an iProduct, apply the fix whenever the users touches an input
if( navigator.userAgent.length && /iPhone|iPad|iPod/i.test( navigator.userAgent ) ) {
// define as many target fields as your like
$( ".search-form input, .contact-form input" )
.on( { 'touchstart' : function() { zoomDisable() } } )
.on( { 'touchend' : function() { setTimeout( zoomEnable , 500 ) } } );
}
Scrolling: I cannot understand why when certain pages are loaded into an iframe just when the the tbk object loading is about done, before my xml file is read, the page is scrolled to the right almost out of sight. I fail to find anything in common on the pages where this occurs. Another lesser problem is that when the keyboard pops up it changes the page scroll but does not correct it when it closes but this is not such a big deal.
I need to find a way to make zoomEnable() function as planned. I also wonder if a script like this could not be used to control the scrolling. I'd be grateful for your thoughts.
John
