原生H5 开发问题总结

最新推荐文章于 2023-01-06 15:53:15 发布

◆sun◆

最新推荐文章于 2023-01-06 15:53:15 发布

阅读量142

点赞数 2

移动端原生H5开发

1. Viewport

<!-- 让页面宽度等于设备宽度，缩放比例为1，禁止用户缩放网页 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- 针对一些不识别viewport的浏览器，如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 针对微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">

不设置的话，相当于用手机访问PC端页面一样，无初始缩放和页面宽度

2. Apple设备使用Web App模式（一般用于SPA应用，因为如果在里面点击还是跳转其他链接的话，还是会从Safari打开的）

在Safari浏览器点击分享按钮-添加到主屏幕，然后在桌面打开

3. 强制浏览器全屏(UC/QQ)

<!-- UC强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- UC强制全屏 --> 
<meta name="full-screen" content="yes">
<!-- UC应用模式 --> 
<meta name="browsermode" content="application">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">

就是浏览器全屏，隐藏浏览器上下的状态栏

4. 忽略

<!-- 忽略网页自动识别数字为电话号码 -->
<meta name="format-detection" content="telephone=no">
<!-- 忽略网页自动识别邮箱账号 -->
<meta name="format-detection" content="email=no">

某些浏览器识别成功之后会将号码或者邮箱转换成a标签

5. Windows Phone点击无阴影

<meta name="msapplication-tap-highlight" content="no">

类似于css的-webkit-tap-highlight: transparent

6. 清除浏览器缓存

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache

HTML项

1. 调用系统功能

<!-- 拨号 -->
<a href="tel:10086">打电话给: 10086</a>
<!-- 短信 -->
<a href="sms:10086">发短信给: 10086</a>
<!-- 邮件 -->
<a href="mailto:839626987@qq.com">发邮件给：839626987@qq.com</a>
<!-- 选择照片或者拍摄照片 -->
<input type="file" accept="image/*">
<!-- 选择视频或者拍摄视频 -->
<input type="file" accept="video/*">
<!-- 多选 -->
<input type="file" multiple>

2. 取消Input在Apple设备中，英文首字母默认大写

<input autocapitalize="off" autocorrect="off">

3. :active伪类失效

<!-- 注册一个空的touchstart事件 -->
<body ontouchstart=""></body>

4. 唤醒App

<a href="weixin://">打开微信</a>

让Android或者Ios开发者提供一个App协议给你就可以了，让人尴尬的是，我们不知道用户到底有没有安装此App应用，所以需要Javascript来配合，当用户已安装直接跳转到App，没有安装跳到下载地址，详情在本文中的Javascript项

5. 软键盘弹出数字键盘(用户只能输入数字)

<input type="number" pattern="[0-9]*">

样式项

1. 去除某些区域点击的时候会出现阴影

a, button, input, img, select, textarea {
  -webkit-tap-highlight-color: transparent
}

2. 禁止用户长按选中、复制文本

.text {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none
}

3. 禁止用户长按出现菜单栏

a, img {
  -webkit-touch-callout: none
}

4. 流畅滚动（一般用于overflow: scroll之后出现滚动不流畅的情况）

.scroll {
  -webkit-overflow-scrolling: touch
}

5. 改变输入框placeholder的颜色值

::-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; }

6. 修改表单元素的默认样式

input, button, select, textarea {
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none
}

checkbox也可以写成switch组件，点击查看switch组件

7. 多行文本超出显示省略号

/* 超出n行时显示省略号 */
.hide-text-n {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: n;
  -webkit-box-orient: vertical
}

8. css3启用硬件加速

写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)
}

9. 解决transition闪屏

.cube {
  -webkit-transform-style: preserve-3d; 
  -webkit-backface-visibility: hidden; 
  -webkit-perspective: 1000
}

10. 旋转屏幕时字体大小不改变

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%
}

11. 某些Android机圆角失效

.radius {
  background-clip: padding-box
}

12. select下拉选择设置右对齐

select option {
  direction: rtl
}

13. 部分机型input的type为search时，自带close按钮的样式修改方案

.search::-webkit-search-cancel-button {
   display: none 
}

14. 使用rem单位

: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，直接修改根元素的就行啦，牵一发而动全身

15. 自定义滚动条样式

::-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修改某个节点的滚动条样式

16. Android上去掉语音输入按钮

input::-webkit-input-speech-button {
  display: none
}

17. 监听屏幕旋转事件并且处理样式

/* 竖屏时样式 */
@media all and (orientation:portrait) {
  body::after {
      content: '竖屏'
    }
}
/* 横屏时样式 */
@media all and (orientation:landscape) {
    body::after {
      content: '横屏'
    }
}

18. Flexbox兼容写法

.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
}

这里列出了几个经常使用的属性，一般情况下够用

19. 高度Auto如何全屏居中

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布局，一般用于对话框

20. 左边固定宽度，右边自适应

html

<div class="item box">
  <div class="left"></div>
  <div class="right box-1"></div>
</div>

css

.item .left {
  width: 50rem;
}

flex布局，以前用float+margin

21. 按钮点击的样式

.btn:active {
  opacity: .7
}

22. Scroll-X

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;
}

◆sun◆

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生H5 开发问题总结

移动端原生H5开发1. Viewport&lt;!-- 让页面宽度等于设备宽度，缩放比例为1，禁止用户缩放网页 --&gt;&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"&gt;&lt;!-- 针对一些不识别viewport的浏览器，如黑莓 --&gt...
复制链接

扫一扫