HTML5 Viewport Meta Tag
https://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/
http://developer.blackberry.com/playbook/html5/documentation/viewport.html
https://msdn.microsoft.com/en-us/library/windows/desktop/bb152361(v=vs.85).aspx
<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的属性,并且能够熟 ...
随机推荐
- [转]gulp构建前端工程
摘要: Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript. ...
- Floyd-Warshall算法
Floyd也是采用动态规划的方案来解决在一个有向图G=(V,E)上每对顶点间的最短路径问题.运行时间为Θ(V3). 算法分析: 用邻接矩阵map[][]存储有向图,用dist[i][j]表示i到j的最 ...
- mysql 分表策略
mysql单表数据量巨大时,查询性能会很差,经常遇到的是存储日志相关的数据会每天产生大量的数据. 这里提供单表拆分成多表存储的三个思路: 一,固定N张表,ID取模存储 预先创建好N张表,记录按ID取模 ...
- Carthage 安装和使用
和Cocoapods相比各有利弊吧,具体对比参见: Carthage 初探:四大优势与四大劣势 第一步:如果没有安装Homebrew先安装 打开命令终端,直接输入以下命令回车 /usr/bin/rub ...
- 字节对齐导致的iOS EXC_ARM_DA_ALIGN崩溃
本文原链接: http://www.cnblogs.com/zouzf/p/4455167.html 先看一下这个链接:http://www.cnblogs.com/ren54/archive/201 ...
- HTML5新特性之WebRTC
1.概述 WebRTC是“网络实时通信”(Web Real Time Communication)的缩写,它主要用来让浏览器实时获取和交换视频.音频和数据. WebRTC共分三个API. MediaS ...
- 再探 Ext JS 6 (sencha touch/ext升级版) 变化篇 (编译命令、滚动条、控制层、模型层、路由)
从sencha touch 2.4.2升级到ext js 6,cmd版本升级到6.0之后发生了很多变化 首先从cmd说起,cmd 6 中sencha app build package不能使用了,se ...
- 全国DNS服务器IP地址【电信、网通、铁通】
免费DNS地址: 114DNS:114.114.114.114(推荐国内使用) Google DNS:8.8.8.8(国外) ************************************* ...
- 数据结构 - 归并排序(merging sort)
归并排序(merging sort): 包含2-路归并排序, 把数组拆分成两段, 使用递归, 将两个有序表合成一个新的有序表. 归并排序(merge sort)的时间复杂度是O(nlogn), 实际效 ...
- JS获取跨域的cookie实例
如果说JS能实现跨域cookie,你可能觉得不太可能实现,不过事实上,这个还是可以搞定的,不过需要一定的条件才行的哦!具体方案如下: 一共需要3个文件,第一个文件为需要获取cookie的页面,在这个页 ...