HTML5 Viewport Meta Tag

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

<style type="text/css">

.textfield_ {

	border: 0px;/**/

	font-size: 1.5em;

	width:200px;

	height: 30px;

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;

	margin-left: 0px;

	font-weight: bold;

	background-repeat: no-repeat;

	background-position: center;

	color: #42261A;

	font-family: Arial, Helvetica, sans-serif;

}

.abc{ width:100%;align:right;valign:top;padding-left:50%;}

/* 设置了浏览器宽度不大于 2160px 时 abc 显示1200px宽度 */

@media screen and (max-width: 2160px) {

.abc {padding-left:800px;} 

}

/* 设置了浏览器宽度不大于 1080px 时 abc  */

@media screen and (max-width: 1081px) {

.abc {padding-left:450px;}

}

/* 设置了浏览器宽度不大于720px时 abc  */

@media screen and (max-width: 768Px) {

.abc {padding-left:330px;}

}

/* 设置了浏览器宽度不大于720px时 abc  */

@media screen and (max-width: 720px) {

.abc {padding-left:300px;} 

}

/* 设置了浏览器宽度不大于500px时 abc  */

@media screen and (max-width: 640px) {

.abc {padding-left:250px;}

.textfield_{font-size: 1.1em;width:150px;	height: 18Px;}

}

/* 设置了浏览器宽度不大于500px时 abc  */

@media screen and (max-width: 414px) {

.abc {padding-left:160px;}

.textfield_{font-size: 1.0em;width:150px;	height: 18Px;}

}

/* 设置了浏览器宽度不大于500px时 abc  */

@media screen and (max-width: 320px) {

.abc {padding-left:120px;}

.textfield_{font-size: 0.9em;width:150px;	height: 18Px;}

}

</style>

</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0">

<div align="center"><img width="100%" src="data:images/top.png" border="0"></div>

<div style="float:left;position:absolute;align:center;z-index:9;padding-top:11%;">

		<table width="100%" border="0" cellspacing="0" cellpadding="0">

	    <tr>

	      <td class="abc">

	      	<input class="textfield_" name="textfield" type="text" id="textfield" value="10330" height="14"  />

	      </td>

	    </tr>

	    <tr height="8px;">

	    	<td colspan="2"></td>

	    </tr>

	    <tr >

	      <td class="abc">

	      	<input class="textfield_" name="textfield2" type="text" id="textfield2" value="210000055878781" height="14"  />

	      </td>

	    </tr>

		</table>

	</div>

<div style="align:center;float:left;z-index:-1;" ><img width="100%" src="data:images/mid.png" border="0">

</div>

<div align="center"><img width="100%" src="data:images/buttom.png" border="0"></div>

HTML5 Viewport Meta Tag的更多相关文章

viewport Meta Tag
网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放. <meta name="viewport" conten ...
Using the viewport meta tag to control layout on mobile browsers
A typical mobile-optimized site contains something like the following: <meta name="viewport& ...
豆知识扩展：HTML<meta> tag
豆知识: HTML<meta> tag Metadata 是关于数据的信息. The <meta> tag provides metadata关于网页.Metadat不会显示在 ...
移动前端头部标签(HTML5 head meta)
移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来.本文整理一些常用的meta标签. <!DOCTYPE html&g ...
HTML5中meta属性大集合
1.声明文档的字符编码 <meta charset='utf-8'> 2.声明文档的兼容模式 <meta http-equiv="X-UA-Compatible" ...
[转] HTML5中meta属性的使用详解
meta属性在HTML中占据了很重要的位置.如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等.虽然一些网页可能没有使用meta,但是作为正规军,我们还是有必要了解一些meta的属性,并且能够熟 ...
HTML meta标签总结,HTML5 head meta属性整理
原文链接:http://caibaojian.com/mobile-meta.html <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 -- ...
[转]手机web HTML头信息解释和viewport meta标签解释
<meta charset="utf-8" /> <link rel="shortcut icon" href="favicon.i ...
HTML5中meta属性
meta属性在HTML中占据了很重要的位置.如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等.虽然一些网页可能没有使用meta,但是作为正规军,我们还是有必要了解一些meta的属性,并且能够熟 ...

随机推荐

关于imp无法导出空表
前天在业务库中导出完整库时,再导入到新库时发现部分表丢失. 看日志后分析是部分空表没有导出.查google知,11G中新特性,当表无数据时,不分配segment,以节省空间.而使用exp命令时,无Se ...
WPF打印票据
最近工作的内容是有关于WPF的,整体开发没有什么难度,主要是在打印上因为没有任何经验,犯了一些难,不过还好,解决起来也不是很费劲. WPF打印票据或者是打印普通纸张区别不大,只是说打印票据要把需要打的 ...
使用PowerDesigner导出Word/HTML的一些配置
目标:根据物理视图导出代码和列清单(包括字段.类型.注释).由于默认导出的要素太多,大多不是自己想要的,这里简单说下导出目标的一些配置,留下来备用. 其中,Title中的图和Table表格中的代码预览 ...
QT在windows下实现截屏操作并保存为png图片
QPixmap originalPixmap = QPixmap::grabWindow(QApplication::desktop()->winId()); QString format = ...
merge 实现
今天写了个小程序,做两个已经从小到大排序好的数据的merge. 要求: listA = (1, 3, 5, 10); listB = (4, 6, 12):listA 和listB都是排序由小到大的列 ...
AjaxUploader使用
一.简单上传(Simple Upload with Progress) <CuteWebUI:Uploader ID="ajaxUploader" runat="s ...
easyui + jdbc 实现简单的数据库管理。
/** * 分页未完成 ,执行sql 查询与更新未完成. * 代码拿去,有同学完成了可以再分享出来. * 代码稍微有些乱,没时间整理. * 暂时仅支持oracle ,因sql语句黏合度太高. * ...
Legolas工业自动化平台入门（三）交互事件响应动作
在上一篇Legolas工业自动化平台入门(二)数据响应动作一文中,我们介绍了"动作"相关内容,了解到"动作"分为多种,各种动作的添加方式相同,但是应用方式各自 ...
Java框架篇---Mybatis 入门
一.Mybatis介绍 MyBatis是一款一流的支持自定义SQL.存储过程和高级映射的持久化框架.MyBatis几乎消除了所有的JDBC代码,也基本不需要手工去设置参数和获取检索结果.MyBatis ...
实现TabView(页签)效果
今天花了点时间,设计了一个网页上用的tabview(页签.tabcontrol)效果.个人觉得实现得比较不错,网页元素用得比较少,js代码也比较精练.测试了一下支持IE.FireFox以及chrome ...

HTML5 Viewport Meta Tag

HTML5 Viewport Meta Tag的更多相关文章

随机推荐

热门专题