HTML5 Viewport Meta Tag

https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

https://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/

http://developer.blackberry.com/playbook/html5/documentation/viewport.html

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag?redirectlocale=en-US&redirectslug=Mobile%2FViewport_meta_tag

https://msdn.microsoft.com/en-us/library/windows/desktop/bb152361(v=vs.85).aspx

 http://htmlref.com/

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<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="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="images/mid.png" border="0">
     
     
</div>
<div align="center"><img width="100%" src="images/buttom.png" border="0"></div>

　　

posted @   ®Geovin Du Dream Park™  阅读(343)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示