<!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 { width: 100%; height: 100%; overflow: hidden;}
.jesgoo-content { position: absolute; left: 0; top: 0; width: 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; width: 36px; height: 36px; margin:6px 0 0 12px; border-radius: 6px; overflow: hidden;}
.jesgoo-text{ float: left; padding-left: 10px; padding-top: 6px; width: 210px; overflow: hidden;}
.jesgoo-text.text { width: 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; width: 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>

html5 中meta中 content=width=device-width注意的更多相关文章

  1. <head>中<meta name="viewport" content="width=device-width,initical-scale=1"的作用>

    <meta name="viewport" content="width=device-width,initical-scale=1"的作用> co ...

  2. HTML5移动开发中的meta与link

    meta HTML5移动开发中的一些webkit专属头部标签,能够帮助浏览器更好的解析HTML代码,从而为HTML5移动开发提供更好的前端表现与体验 viewport网页缩放 1 <meta n ...

  3. HTML5头部标签中<meta>常用信息

    整理一些平时常用的,方便查阅 <!-- 字体编码 --> <meta charset="utf-8" /> <!-- 关键字 --> <m ...

  4. 如何理解VB窗体中的scale类属性及width height属性之间的关系

    如何理解VB窗体中的scale类属性及width height属性之间的关系 VB中的SCALEHIEGT,SCALEWIDTH,与窗体中的WIDTH,HEIGHT的区别及关系是许多VB初学者难以理解 ...

  5. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  6. HTML中<meta>标签如何正确使用

    HTML中<meta>标签如何正确使用 如果我们在浏览器中按下F12或者Ctrl+shift+J,便可以打开开发者工具,在element中即可看到<head>元素中有不少< ...

  7. 我刚知道的WAP app中meta的属性

    之前我一直做的都是WEB前端开发,来北京以后面试了一个移动前端开发,WAP前端开发. 其实在原来公司的时候也做过这方面的开发,可面试的时候面试官问我,要想强制让文档与设备的宽度保持1:1,mate标签 ...

  8. 我刚知道的WAP app中meta的属性(转载)

    之前我一直做的都是WEB前端开发,来北京以后面试了一个移动前端开发,WAP前端开发. 其实在原来公司的时候也做过这方面的开发,可面试的时候面试官问我,要想强制让文档与设备的宽度保持1:1,mate标签 ...

  9. html中meta标签及用法理解

    自己一直想成为高级前端开发工程师,而自学.奈何最近感觉自学收效甚微,一度迷茫. 不破不立,打算改变这样的状态. 春节后上班第一天,今年打算好好实现自己的前端梦想. 重新整理.总结前端技术. 废话,就不 ...

随机推荐

  1. Asp.net内置对象之Request对象(概述及应用)

    Request对象主要用于获取来自客户端的数据,如用户填入表单的数据.保存在客户端的Cookie等,本文将围绕Request对象,讲解其的主要作用:读取窗体变量.读取查询字符串变量.取得Web服务器端 ...

  2. CSS基础知识点(二)——居中

    水平居中 (1) 对于块级元素,最常用的自适应水平居中为:margin:0px auto; (与 margin:auto; 效果相同) (2) 对于行内元素(a, img, input等),最常用的水 ...

  3. android之官方下拉刷新组件SwipeRefreshLayout

    1.setOnRefreshListener(SwipeRefreshLayout.OnRefreshListener listener):设置手势滑动监听器. 2.setProgressBackgr ...

  4. springMVC访问静态资源的两种方式

    1<mvc:default-servlet-handler/> 2 <mvc:resources mapping="/images/**" location=&q ...

  5. 编码规范(二)之Code Templates的设置(转)

    http://swiftlet.net/archives/1199 编码规范(二)之Code Templates的设置(转) 文件(Files)注释标签:/** * @Title: ${file_na ...

  6. StackTrace,Trim

    一: Environment.StackTrace 可能我们看到最多的就是catch中的e参数,里面会有一个StackTrace,然后不可否认的这玩意太有用了,它会把调用堆栈 中的信息输出出来,有了它 ...

  7. JavaScript的事件绑定及深入

     事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定 (DOM2 级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一.传统事件绑定的问题传统事件绑定有内联模型 ...

  8. Eclipse+Maven创建webapp项目<一><二><三>

    转-http://www.cnblogs.com/candle806/p/3439469.html Eclipse+Maven创建webapp项目<一> 1.开启eclipse,右键new ...

  9. 当用GridView导出Execl的时候,会发生只能在执行 Render() 的过程中调用 RegisterForEventValidation的错误

    当用GridView导出Execl的时候,会发生只能在执行 Render() 的过程中调用 RegisterForEventValidation的错误提示. 有两种方法可以解决以上问题: 1.修改we ...

  10. 026. asp.net中将图片以二进制方式保存到数据库并以HTTP流方式输出

    保存到数据库中 protected void imgbtnCreate_Click(object sender, ImageClickEventArgs e) { string PerHomeName ...