html5 中meta中 content=width=device-width注意

<!DOCTYPE html>

        <html>

        <head>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

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

        <style>

  

body { margin:0; font-size: 13px; font-family: sans-serif; color:#333; line-height: 1.5; background: #fff;}
div{ margin:0;} 
a{-webkit-tap-highlight-color:transparent; color:inherit;}

.jesgoo-ad-container {  100%; height: 100%; overflow: hidden;}
.jesgoo-content { position: absolute; left: 0; top: 0;  100%; height: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; text-decoration: none; }

.jesgoo-icon { float: left; border: none;  36px; height: 36px; margin:6px 0 0 12px; border-radius: 6px; overflow: hidden;}
.jesgoo-text{ float: left; padding-left: 10px; padding-top: 6px;  210px; overflow: hidden;}
.jesgoo-text.text {  260px; }

.jesgoo-title, .jesgoo-desc { white-space: nowrap; overflow: hidden; text-overflow:ellipsis;}

.jesgoo-title { font-weight: 800;}
.jesgoo-desc { color: #666; font-size: 12px; }
.jesgoo-desc marquee{ /*text-indent: -180px;*/}    

.jesgoo-btn{ position: absolute;  40px; line-height: 24px; text-align: center; right: 12px; top: 50%; margin-top: -12px; color:#fff; font-style: normal; border-radius: 4px; background: #2e97ea; display: none;}

  </style>

        <script type="text/javascript">

    

window.onload = function(){

var containerId = 'jesgoo-id-container';
var resetSize = function () {
    var containerEle = document.getElementById(containerId);
    var win = window;
    var winW = win.innerWidth;
    var winH = win.innerHeight;
    var fzW, fzH;
    if (winW / winH < 5 / 2) {
        fzW = winW / 300 * 20;
        
        fzH = 1000;
    }
    else {
        
        fzW = 1000;
        fzH = winH / 96 * 20;
    }
    var fz = fzW > fzH ? fzH : fzW;

    containerEle.style.fontSize = fz + 'px';
};
//resetSize();

var aEle = document.getElementById("jesgoo-link");
var attrJSON = aEle.getAttribute("extra");
var attrObj = eval("("+ attrJSON +")");
var btn = document.getElementById('jesgoo-btn');

if(attrObj.act == 2){
    btn.innerHTML = "下载";
}else{
    btn.innerHTML = "查看";
}
btn.style.display = "block"


}

   </script>

        </head>

        <body>

        <div id="jesgoo-id-container" class="jesgoo-container">

        <a target="_blank" id="jesgoo-link" class="jesgoo-content" style="text-decoration: none;" href=http://www.baidu.com extra="{'act':1,'pkg':'','title':'','adid':'0','durl':[''],'iurl':[''],'aurl':['']}">

        <div class="jesgoo-text text">

        <div class="jesgoo-title">分享:关键时刻不行怎么办</div>

        <div class="jesgoo-desc"><marquee behavior="scroll" direction="left">只需一招 给她夜夜惊喜</marquee></div>

        </div>

        <i id="jesgoo-btn" class="jesgoo-btn">下载</i>

        </a>

  </div>

        </body>

        </html>

 

 

以上这个物料在ios 320*50的UIWebView iphone的设备上(iPhone5 iPhone4)上右侧有下载或查看按键

但是 这个物料在ios 320*50的UIWebView ipad的设备上 没有看到右侧按键

原因是下面的 content="width=device-width, user-scalable=no, initial-scale=1.0" 设置的content的宽为设备的宽度 button的位置是做了对右偏移的控制 在ipad上device-width 是728 实际button的x位置是716 但是webview 只有320宽度,所以看不到了。使用中注意这个。

 <html>

        <head>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

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

        <style>

原文地址:https://www.cnblogs.com/programmer-blog/p/4210904.html