viewport 640寬的作法 針對iphone和安卓單獨設置

<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="utf-8" />
<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<meta HTTP-EQUIV="expires" CONTENT="0">
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="pragram" content="no-cache" />

<base href="http://app.cntcma.com/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>第二屆京津冀協同發展論壇</title><meta name="sharecontent" data-msg-img='http://app.cntcma.com/attachments/image/20141113/20141113205001_32033.png' data-msg-title='第二屆京津冀協同發展論壇' data-msg-content='敬請關注' data-msg-callBack='' data-line-img='http://app.cntcma.com/attachments/image/20141113/20141113205001_32033.png' data-line-title='第二屆京津冀協同發展論壇' data-line-callBack='' />
<script type="text/javascript">
if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
        var version = parseFloat(RegExp.$1);
        if(version>2.3){
            var phoneScale = parseInt(window.screen.width)/640;
            document.write('<meta name="viewport" content="width=640, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');
        }else{
            document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
        }
    }else{
        document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
    }

//微信去掉下方刷新欄
    if(RegExp("MicroMessenger").test(navigator.userAgent)){
        document.addEventListener('WeixinJSBridgeReady', function() {
            WeixinJSBridge.call('hideToolbar');
        });
    }    
</script>

參考的頁面:http://app.cntcma.com/wx/35f4a8d465e6e1edc05f3d8ab658c551.htmljavascript

 

還看見一個雞賊的東西 css

width: 100%;
max-width: 600px;html

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">java

這個更省事,都不用單獨寫viewport了web

 

css動畫裏面播放完了,不在初始位置,而在最終位置的css規則爲微信

-webkit-animation-fill-mode: both;
animation-fill-mode: both;app

 

要想div高度100%,先得設置 html和body的高度100%ide

相關文章
相關標籤/搜索