webapp页面模板

最新推荐文章于 2023-01-13 08:00:00 发布

lihefei_coder

最新推荐文章于 2023-01-13 08:00:00 发布

阅读量2k

点赞数 1

分类专栏： webapp html5 css3 文章标签： webapp 移动端开发 web app html5

本文链接：https://blog.csdn.net/lihefei_coder/article/details/64920245

版权

html5 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

css3

4 篇文章 0 订阅

订阅专栏

webapp

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!--
width=device-width :    文档的宽度等于设备的宽度
initial-scale=1.0 :     文档初始化缩放比例为1.0
minimum-scale=1.0 :     文档最小缩放比例为1.0
maximum-scale=1.0 :     文档最大缩放比例为1.0
user-scalable=no :      文档不允许用户手动缩放
-->
<meta name="apple-mobile-web-app-capable" content="yes"><!-- iPhone私有标签，允许全屏模式浏览 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"><!-- iPhone私有标签，将网站添加到主屏幕快速启动方式，针对safari顶端状态条的样式 -->
<meta content="yes" name="apple-touch-fullscreen"><!-- iPhone私有标签，指定从主屏幕打开页面时safari默认全屏 -->
<meta name="format-detection" content="telephone=no; email=no"><!-- 不识别邮件和不把数字识别为电话号码 -->
<link rel="apple-touch-icon" href="icon.png"><!-- app icon 若想去掉系统自带的反光效果，可以修改为 apple-touch-icon-precompsed -->。

<meta name="screen-orientation" content="portrait"><!-- uc强制竖屏 -->
<meta name="full-screen" content="yes"><!-- UC强制全屏 -->
<meta name="browsermode" content="application"><!-- UC应用模式 -->
<meta name="x5-orientation" content="portrait"><!-- QQ强制竖屏 -->
<meta name="x5-fullscreen" content="true"><!-- QQ强制全屏 -->
<meta name="x5-page-mode" content="app"><!-- QQ应用模式 -->
<meta name="msapplication-tap-highlight" content="no"><!-- windows phone 点击无高光 -->

<title>Examples</title>
<style>
/* Resets */
* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
*::after,*::before {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
html,body,div,form,p,ul,li,span,label,img,input {
    margin: 0;
    padding: 0;
    outline: none;
}

/* 适配不同分辨率设备 开始 */
html {
    font-size: 62.5%; /* rem换算px，1rem = 10px */
}
@media only screen and (min-width: 481px) {
    html {
        font-size: 94%!important;
    }
}
@media only screen and (min-width: 561px) {
    html {
        font-size: 109%!important;
    }
}
@media only screen and (min-width: 641px) {
    html {
        font-size: 125%!important;
    }
}
/* 适配不同分辨率设备 结束 */


body {
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased; /* 解决字体在移动端比例缩小后出现锯齿的问题 */
    -webkit-text-size-adjust: none; /* 阻止旋转屏幕时自动调整字体大小 */
    -webkit-user-select: none; /* 禁止用户选中文字 */
    -webkit-touch-callout: none; /* 禁止ios长按时触发系统的菜单，禁止ios&android长按时下载图片 */
    overflow: hidden;
    word-break: break-all;
    overflow: auto;
}

input [type=button]{
    -webkit-appearance:none; /* 去除按钮默认样式 */
}

input::-webkit-input-speech-button { /* android上隐藏语音输入按钮 */
    display:none;
}

input::-webkit-input-placeholder{ /* 修改输入框placeholder的样式 */
    color:#AAAAAA;
}

input:focus::-webkit-input-placeholder{ /* 修改输入框获取焦点时placeholder的样式 */
    color:#EEEEEE;
}

a,button,input{
    -webkit-tap-highlight-color: rgba(255,0,0,0); /* 去除android a/button/input标签被点击时产生的边框 & 去除ios a标签被点击时产生的半透明灰色背景 */
    -webkit-tap-highlight-color: transparent;
}

/* 自定义滚动条样式 开始 */
::-webkit-scrollbar { /* 滚动条整体部分 */ }
::-webkit-scrollbar:vertical { /* 竖向滚动条部分 */ }
::-webkit-scrollbar:horizontal { /* 横向滚动条部分 */ }
::-webkit-scrollbar-track { /* 滚动条的轨道(里面装有Thumb) */ }
::-webkit-scrollbar-thumb { /* 滚动条里面的小方块，能向上向下移动(或往左往右移动，取决于是垂直滚动条还是水平滚动条) */ }
::-webkit-scrollbar-button { /* 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置 */ }
::-webkit-scrollbar-track-piece { /* 内层轨道，滚动条中间部分(除去) */ }
::-webkit-scrollbar-corner { /* 边角，即两个滚动条的交汇处 */ }
::-webkit-resizer { /* 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 */ }
/* 自定义滚动条样式 结束 */

.hardware-acceleration{
    -webkit-transform:translate3d(0, 0, 0); /* 在ios下可以让动画更加流畅（这个属性会调用硬件加速模式），但是在android下不可乱用，会产生很多见所未见的bug */
}

/* 允许独立的滚动区域和触摸回弹 */
.touch-scrolling {
    overflow:auto; /* winphone8和android4+ */
    -webkit-overflow-scrolling: touch; /* ios5+ */
}

/* 0.5px横线 */
.horizontal-line {
    position: relative;
}
.horizontal-line:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    -webkit-transform: scale(.5);
    -webkit-transform-origin: 0 0;
    -webkit-box-sizing: border-box;
    z-index :0;
}

/* 0.5px竖线 */
.vertical-line {
    position: relative;
}
.vertical-line:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-right: 1px solid rgba(255,255,255,0.3);
    -webkit-transform: scale(.5);
    -webkit-transform-origin: 0 0;
    -webkit-box-sizing: border-box;
    z-index :0;
}

/* 0.5px边框线 */
.border-line {
    position: relative;
}
.border-line:before {
    content: "";
    position: absolute;
    top:0; left: 0;
    width: 200%;
    height: 200%;
    border:1px solid #aaa;
    transform-origin: 0 0;
    transform: scale(0.5, 0.5);
    pointer-events: none;
}

</style>
</head>

<body>

    <input autocapitalize="off" autocorrect="off" /><!-- 取消input在ios下输入的时候英文首字母的默认大写 -->
    <input type=file accept="image/*"><!-- 选择照片 -->
    <input type=file accept="video/*"><!-- 选择视频 -->

</body>

</html>

lihefei_coder

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webapp页面模板

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><!--width=device-wid
复制链接

扫一扫