latest log

酩酊状態で書いたエンジニアポエムです。酩酊状態で読んでください。

ガラケー用コンテンツをスマフォ用に変換されて幅が余っちゃってる時に使うコード

えーと、幅240pxのガラケー用のコンテンツをサーバで自動変換されちゃって、幅が広めなAndroidでみると左右が黒い場合に使うような、きっとそんな時に使うコード。

<meta name="viewport" content="width=240, initial-scale=1.333333, maximum-scale=1.333333, user-scalable=yes">
<script>
(function() {
    function getClientWidth() {
        if (document.documentElement) { // documentElement = <html>
            if (document.documentElement.clientWidth) {
                return document.documentElement.clientWidth;
            }
        }
        if (window.innerWidth) {
            return window.innerWidth;
        }
        if (window.screen) {
            if (window.screen.width && window.screen.availWidth) {
                return Math.min(window.screen.width,
                                window.screen.availWidth);
            }
        }
        return 0;
    }

    function overWriteMetaTag(originalWidth, currentWidth, validScale) {
        var meta = document.querySelector("meta[name=viewport]");

        if (meta) {
            var content = meta.getAttribute("content");

            if (content) {
                content = content.replace("user-scalable=yes", "user-scalable=no").
                                  replace(/initial-scale=([\d\.]+)/, "initial-scale=" + validScale).
                                  replace(/minimum-scale=([\d\.]+)/, "minimum-scale=" + validScale).
                                  replace(/maximum-scale=([\d\.]+)/, "maximum-scale=" + validScale);
                meta.setAttribute("content", content);

            }
        }
    }

    function addStyleNode(style) {
        var node = document.createElement("style");

        node.textContent = style;
        document.head.appendChild(node);
    }

    if ( !/Android/i.test(navigator.userAgent) ) {
        return;
    }
    var originalWidth = 240,
        currentWidth = getClientWidth(),
        validScale = currentWidth / originalWidth; // 480 / 240 = 2;

    overWriteMetaTag(originalWidth, currentWidth, validScale);

/*  zoom: 1.3333
    <style>body>div>center { -webkit-transform: scale(1.3333) }</style>
    <body>
        <div>
            <center>ZOOM</center>
        </div>
    </body>
 */
//  addStyleNode("body>div>center { -webkit-transform: scale(" + validScale + ") }");
})();
</script>

これを

<meta name="viewport" content="width=240, initial-scale=1.3333, maximum-scale=1.333333, user-scalable=yes">

デバイスの幅にあわせてこうすると

<meta name="viewport" content="width=240, initial-scale=2.0, maximum-scale=2.0, user-scalable=no">

(ε・◇・)з チラシの裏丼