0

我有一个 Android 应用程序，它使用 Cordova 和 WebView 显示从远程 Web 服务器加载的内容（主要是由 PHP/Zend 生成的静态页面）。

我所知道的所有方法都禁用了网页内容的缩放（因为 PHP 根据应用程序发送的分辨率生成布局），但在高清手机（320/480DPI；例如 Samsuns S3/Note、HTC one 等）上，当用户单击链接加载新页面，旧页面的内容被放大，而 WebView 等待服务器的响应（不到 1 秒但仍然看起来很烦人）。

视口设置为不带缩放的设备分辨率：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

或在 Zend 中定义：

$view->headMeta()->appendName('viewport', 'initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi');

WebView 的缩放功能也被禁用（在 APK 的 InitialActivity 中）：

appView.getSettings().setSupportZoom(false);
appView.getSettings().setBuiltInZoomControls(false);
appView.getSettings().setUseWideViewPort(false);

还有几个 JS 库（google-analytics、jQuery 1.9.1、jQuery UI、用于 jQuery 3.0.5 的 Photoswipe），所以我不确定它们中的任何一个是否会导致这种情况。

任何提示可能导致这种情况？

PS：作为最终解决方案，我正在考虑将页面内容隐藏在 onUnload 处理程序中，但我想知道为什么我必须做如此激进的事情。

4

1 回答 1

0

还没有回答，所以我至少会发布我是如何解决这个问题的（以防有人碰巧有类似的问题）。

/**
 * disables default link redirect; shows splash screen and redirects after few milliseconds
 *
 * @param  event {Event/String} either event from user action (then 'this' must be an anchor <A>) or URL for manual redirect
 */
linkRedirect = function(event) {
    var
        curHref = document.location.href,
        newHref = this.href;

    if ('string' === typeof event) {
        newHref = event;
        event = null;
    }

    if ('string' === typeof newHref && !newHref.match('^mailto:')) {
        (event && event.preventDefault ? event.preventDefault() : undefined); //stop default browser link redirect

        curHref = curHref.split('#');  //separate URL path (part that is send to server) and hash (part only for browser)
        newHref = newHref.split('#');

        if ('' !== newHref[0] && curHref[0] !== newHref[0]) { //new URL has different server path - redirect (if newHref[0] is empty, it means on Hash was passed)
            navigator.splashscreen.show(); //show splash
            $('body').height();   //force browser to update DOM by reading a CSS property

            mv.user.redirectTo.defer(100, this, [newHref.join('#')]); //allow the DOM to redraw and then redirect
        }
        else if (newHref[1] && curHref[1] !== newHref[1]) { //new URL has different only the hash - change it (link <a href="#"> is reserver for onclick handler and is ignored!!!)
            document.location.hash = newHref[1];
        }
    } //else no HREF on this link - ignore it
};

/**
 * Loads page from given URL into current document
 *
 * @param  link {String}
 */
redirectTo = function(link) {
    document.location.href = link;
};

/**
 * Disable default form submission; shows splash screen and submits data after few milliseconds
 *
 * @param  event {Event} event for user action
 * @return {Boolean} returns false to prevent default submission
 */
formSubmit = function(event) {
    (event && event.preventDefault ? event.preventDefault() : undefined);
    navigator.splashscreen.show(); //show splash
    $('body').height();   //force browser to update DOM by reading a CSS property

    $('<form>')[0].submit.defer(100, this); //allow the DOM to redraw and then redirect
    /* form.submit should be a method to submit the form, but in case some form element (usually the submit button)
     * has ID="submit", then form.submit contains reference to the element (button) and there is no way to manually
     * submit the button (and form.submit.click() cannot be used as it would only create recursion).
     *
     * Workaround is to create new empty Form and use its submit method called on the correct scope.
     */

    return false; //same as prevent default (for case event is missing)
};

$(document).on('click', 'a', linkRedirect); //watch for clicks on links and hide page content before redirect
$(document).on('submit', 'form', formSubmit); //watch for form submissions and hide page content before submitting
于 2013-11-25T12:35:32.783 回答