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

<!DOCTYPE html>

<html>

<head>

<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>

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

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

</div>

</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 name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">

<style>

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

<head>中<meta name="viewport" content="width=device-width,initical-scale=1"的作用>
<meta name="viewport" content="width=device-width,initical-scale=1"的作用> co ...
HTML5移动开发中的meta与link
meta HTML5移动开发中的一些webkit专属头部标签,能够帮助浏览器更好的解析HTML代码,从而为HTML5移动开发提供更好的前端表现与体验 viewport网页缩放 1 <meta n ...
HTML5头部标签中<meta>常用信息
整理一些平时常用的,方便查阅  <meta charset="utf-8" />  <m ...
如何理解VB窗体中的scale类属性及width height属性之间的关系
如何理解VB窗体中的scale类属性及width height属性之间的关系 VB中的SCALEHIEGT,SCALEWIDTH,与窗体中的WIDTH,HEIGHT的区别及关系是许多VB初学者难以理解 ...
HTML5在canvas中绘制复杂形状附效果截图
HTML5在canvas中绘制复杂形状附效果截图一.绘制复杂形状或路径在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...
HTML中<meta>标签如何正确使用
HTML中<meta>标签如何正确使用如果我们在浏览器中按下F12或者Ctrl+shift+J,便可以打开开发者工具,在element中即可看到<head>元素中有不少< ...
我刚知道的WAP app中meta的属性
之前我一直做的都是WEB前端开发,来北京以后面试了一个移动前端开发,WAP前端开发. 其实在原来公司的时候也做过这方面的开发,可面试的时候面试官问我,要想强制让文档与设备的宽度保持1:1,mate标签 ...
我刚知道的WAP app中meta的属性(转载)
之前我一直做的都是WEB前端开发,来北京以后面试了一个移动前端开发,WAP前端开发. 其实在原来公司的时候也做过这方面的开发,可面试的时候面试官问我,要想强制让文档与设备的宽度保持1:1,mate标签 ...
html中meta标签及用法理解
自己一直想成为高级前端开发工程师,而自学.奈何最近感觉自学收效甚微,一度迷茫. 不破不立,打算改变这样的状态. 春节后上班第一天,今年打算好好实现自己的前端梦想. 重新整理.总结前端技术. 废话,就不 ...

随机推荐

OOP作业
1,定义一个水果类(fruit),水果类中的有[属性]:颜色(color).价格(price).重量(weigth),再定义一个<测试类>,创建一个苹果(apple)的对象, 颜色是&qu ...
【NOIP2010】引水入城
以前一直以为是什么高端DP,看了题解才发现是水题,老是这样看题解才能写出来到赛场上怎么办嘛QAQ 原题: 在一个遥远的国度,一侧是风景秀美的湖泊,另一侧则是漫无边际的沙漠.该国的行政区划十分特殊,刚好 ...
黑马程序员——JAVA基础之构造函数，构造代码块
------- android培训.java培训.期待与您交流! ---------- 构造函数特点: 1. 函数名与类名相同 2. 不用定义返回值类型 3. 不可以写return语句构造函数 ...
硬链接与软连接[转自vbird]
前言在 Linux 底下的连结档有两种,一种是类似 Windows 的快捷方式功能的文件,可以让你快速的链接到目标文件(或目录),这种是软链接: 另一种则是透过文件系统的 inode 连结来产生新档 ...
论文笔记之： Recurrent Models of Visual Attention
Recurrent Models of Visual Attention Google DeepMind 模拟人类看东西的方式,我们并非将目光放在整张图像上,尽管有时候会从总体上对目标进行把握,但是也 ...
使用Cloudera部署，管理Hadoop集群
Hadoop系列之(三):使用Cloudera部署,管理Hadoop集群 http://www.cnblogs.com/ee900222/p/hadoop_3.html Hadoop系列之(一):Ha ...
MySQL-负载很高排查思路
工欲善其事必先利其器,我说一下思路思路:1.确定高负载的类型 htop,dstat命令看负载高是CPU还是IO2.监控具体的sql语句,是insert update 还是 delete导致高负载3. ...
WCF入门教程一[什么是WCF]
一.概述 Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows通讯接口,它是.NET框架的一部分.由 .NE ...
ibm硬件知识点
ibm http://www-03.ibm.com/systems/storage/disk/storwize_v3700/index.html Current software level: Ver ...
C#中的List<string>泛型类示例
在C#代码中使用一系列字符串(strings)并需要为其创建一个列表时,List<string>泛型类是一个用于存储一系列字符串(strings)的极其优秀的解决办法.下面一起有一些Li ...

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

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

随机推荐

热门专题