<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="320">
不设置的话,相当于用手机访问PC端页面一样,无初始缩放和页面宽度
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="apple-touch-icon" href="xxx.png">
<link rel="apple-touch-startup-image" href="xxx.png">
<meta name="apple-mobile-web-app-title" content="标题">
在Safari浏览器点击分享按钮-添加到主屏幕,然后在桌面打开
<meta name="screen-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<meta name="x5-orientation" content="portrait">
<meta name="x5-fullscreen" content="true">
<meta name="x5-page-mode" content="app">
就是浏览器全屏,隐藏浏览器上下的状态栏
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
某些浏览器识别成功之后会将号码或者邮箱转换成a标签
<meta name="msapplication-tap-highlight" content="no">
类似于css的-webkit-tap-highlight: transparent
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
手机页面通常在第一次加载后会进行缓存,然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache
<a href="tel:10086">打电话给: 10086a>
<a href="sms:10086">发短信给: 10086a>
<a href="mailto:[email protected]">发邮件给:[email protected]a>
<input type="file" accept="image/*">
<input type="file" accept="video/*">
<input type="file" multiple>
<input autocapitalize="off" autocorrect="off">
<body ontouchstart="">body>
<a href="weixin://">打开微信a>
让Android或者Ios开发者提供一个App协议给你就可以了,让人尴尬的是,我们不知道用户到底有没有安装此App应用,所以需要Javascript来配合,当用户已安装直接跳转到App,没有安装跳到下载地址,详情在本文中的Javascript项
type="number" pattern="[0-9]*">
a, button, input, img, select, textarea {
-webkit-tap-highlight-color: transparent
}
.text {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none
}
a, img {
-webkit-touch-callout: none
}
.scroll {
-webkit-overflow-scrolling: touch
}
::-webkit-input-placeholder { /* WebKit browsers */ color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; }
::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; }
:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }
input, button, select, textarea {
border: none;
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none
}
checkbox也可以写成switch组件,点击查看switch组件
/* 超出n行时显示省略号 */
.hide-text-n {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: n;
-webkit-box-orient: vertical
}
写transition、animation时,请用transform代替left、top等属性,从而使动画更流畅
.cube {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0)
}
.cube {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000
}
html, body, form, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%
}
.radius {
background-clip: padding-box
}
select option {
direction: rtl
}
.search::-webkit-search-cancel-button {
display: none
}
:root {
font-size: 10px
}
body {
font-size: 1.4rem
}
@media screen and (max-width: 320px) {
:root {
font-size: 8px
}
}
1rem = 1 * 根元素的font-size值,因此这里的body font-size为14px,以后要修改font-size,直接修改根元素的就行啦,牵一发而动全身
::-webkit-scrollbar /* 滚动条整体部分 */
::-webkit-scrollbar-thumb /* 滚动条内的小方块 */
::-webkit-scrollbar-track /* 滚动条轨道 */
::-webkit-scrollbar-button /* 滚动条轨道两端按钮 */
::-webkit-scrollbar-track-piece /* 滚动条中间部分,内置轨道 */
::-webkit-scrollbar-corner /* 边角,两个滚动条交汇处 */
::-webkit-resizer /* 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 */
::-webkit-scrollbar修改浏览器滚动条样式,div::-webkit-scrollbar修改某个节点的滚动条样式
input::-webkit-input-speech-button {
display: none
}
/* 竖屏时样式 */
@media all and (orientation:portrait) {
body::after {
content: '竖屏'
}
}
/* 横屏时样式 */
@media all and (orientation:landscape) {
body::after {
content: '横屏'
}
}
.box {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex
}
.box-1 {
-webkit-box-flex: 1.0;
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
flex-grow: 1
}
.box-column {
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.box-row-center {
-webkit-box-pack: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center
}
.box-column-center {
-webkit-box-align: center;
-moz-align-items: center;
-webkit-align-items: center;
align-items: center
}
.box-center {
-webkit-box-pack: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-align-items: center;
-webkit-align-items: center;
align-items: center
}
.box-between {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between
}
.box-around {
-webkit-box-pack: justify;
-webkit-justify-content: space-around;
-ms-flex-pack: justify;
justify-content: space-around
}
这里列出了几个经常使用的属性,一般情况下够用
html
<div class="dialog-wrapper box box-center">
<div class="dialog-content">我是内容div>
div>
css
.dialog-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
z-index: 100
}
.dialog-content {
background-color: #fff
}
fixed + flexbox布局,一般用于对话框
html
<div class="item box">
<div class="left">div>
<div class="right box-1">div>
div>
css
.item .left {
width: 50rem;
}
flex布局,以前用float+margin
.btn:active {
opacity: .7
}
html
<div class="scroll-x">
<div class="scroll-item">div> * n
div>
css
.scroll-x {
display: flex;
width: auto;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
height: 55px;
padding: 15px;
}
.scroll-item {
width: 55px;
flex-shrink: 0;
margin-right: 10px;
background-color: blueviolet;
}