计算机教程

必赢娱乐棋牌移动端H5页面注意事项

28 4月 , 2019  

移动端H5页面注意事项

2017/02/18 · HTML5 ·
移动端

原文出处: Alexee   

1. 单个页面内容不能过多

设计常用尺寸:7501334 / 6401134,包含了手机顶部信号栏的高度。

移动端H5活动页面常常需要能够分享到各种社交App中,常用的有微信、QQ等。

使用移动设备查看页面时会发现,在微信浏览器中有顶部导航栏,在qq内置浏览器里不止有顶部导航,底部也有操作栏(safari浏览器也一样),这些都会占用设计稿显示区域,因此在 设计环节 就需要考虑内容的多少,页面底部要预留一定的空白,这样在微信或qq中才不会被遮住。

如下图(QQ内置浏览器):页面设计尺寸为 7501334,顶部占用
150px,底部占用 110px,共占用了 260px,因此设计稿内容应控制在
1334-260=1074px 的高度内。编写代码时,使用 Chrome
浏览器模拟设备大小,将该尺寸(**750
1074**)存下来,用于实时查看移动端页面效果。

如果页面已经写好了,就只能按照上面的尺寸进行内容的调整了,缩小元素间距,缩放图片大小等。
分享下我的失败尝试:

  1. 如果对整个页面进行缩放(使用 meta
    标签),按照设计稿的比例,在高度满足的情况下宽度会偏小,两边会有白底;
  2. 就算使用 rem
    作为相关间距的单位,也没有办法找到一个合适的比例在两种高度(微信/QQ)下切换,因此统一调成适配
    QQ
    的,这样就算在微信下有多余的空白,固定底部的引导下滑箭头也能使其不会过于突兀。

必赢娱乐棋牌 1

750*1334 页面示例

1. 单个页面内容不能过多

设计常用尺寸:7501334 / 6401134,包含了手机顶部信号栏的高度。

移动端H5活动页面常常需要能够分享到各种社交App中,常用的有微信、QQ等。

使用移动设备查看页面时会发现,在微信浏览器中有顶部导航栏,在qq内置浏览器里不止有顶部导航,底部也有操作栏(safari浏览器也一样),这些都会占用设计稿显示区域,因此在
设计环节
就需要考虑内容的多少,页面底部要预留一定的空白,这样在微信或qq中才不会被遮住。

如下图(QQ内置浏览器):页面设计尺寸为 7501334,顶部占用
150px,底部占用 110px,共占用了 260px,因此设计稿内容应控制在
1334-260=1074px 的高度内。编写代码时,使用 Chrome
浏览器模拟设备大小,将该尺寸(**750
1074**)存下来,用于实时查看移动端页面效果。

如果页面已经写好了,就只能按照上面的尺寸进行内容的调整了,缩小元素间距,缩放图片大小等。
分享下我的失败尝试:

  1. 如果对整个页面进行缩放(使用 meta
    标签),按照设计稿的比例,在高度满足的情况下宽度会偏小,两边会有白底;
  2. 就算使用 rem
    作为相关间距的单位,也没有办法找到一个合适的比例在两种高度(微信/QQ)下切换,因此统一调成适配
    QQ
    的,这样就算在微信下有多余的空白,固定底部的引导下滑箭头也能使其不会过于突兀。

必赢娱乐棋牌 2

750*1334 页面示例

2. 标题简短

移动端浏览器导航条宽度有限,简短的标题可以使其展示完整。

2. 标题简短

移动端浏览器导航条宽度有限,简短的标题可以使其展示完整。

3. 二维码图片使用 img 标签引入

二维码图片不要写为元素背景,不然长按没有办法触发扫描功能。应使用 img 标签引入,如下:

![](images/qrcode.png)

3. 二维码图片使用 img 标签引入

二维码图片不要写为元素背景,不然长按没有办法触发扫描功能。应使用 img
标签引入,如下:

JavaScript

![](images/qrcode.png)

1
![](images/qrcode.png)

4. 二维码图片记得扫描测试

有时候扫描二维码之后,会跳转至某个地址,不幸的话QQ或者微信会对这个地址进行温馨提醒,如下图所示:

必赢娱乐棋牌 3

QQ内的温馨提醒

这样会阻止部分用户继续访问,从而无法很好的将用户引导到活动想要推广的产品/品牌页面,如
App 的下载页面等。因此二维码的扫描测试不能少。

举个例子,如果二维码扫描结果是应用的下载地址的话,可以使用应用宝的微下载地址来生成二维码,这是不会被“温馨提醒”的。

4. 二维码图片记得扫描测试

有时候扫描二维码之后,会跳转至某个地址,不幸的话QQ或者微信会对这个地址进行温馨提醒,如下图所示:

必赢娱乐棋牌 4

QQ内的温馨提醒

这样会阻止部分用户继续访问,从而无法很好的将用户引导到活动想要推广的产品/品牌页面,如
App 的下载页面等。因此二维码的扫描测试不能少。

举个例子,如果二维码扫描结果是应用的下载地址的话,可以使用应用宝的微下载地址来生成二维码,这是不会被“温馨提醒”的。

5. 使用 Gulp 拼合图片

如果打算先布局,后使用自动化工具将图片拼起来,减少请求数,需要注意:在编写
CSS
的时候,图片宽高应固定,图片拼合后才能通过定位和显示区域的宽高来展示图片。

举个例子,如果布局时 width: 100%; background-position: center;,使用工具拼合图片后,该元素区域(100%
的宽度)内会将其他图片显示出来,这不是我们想要看到的。

5. 使用 Gulp 拼合图片

如果打算先布局,后使用自动化工具将图片拼起来,减少请求数,需要注意:在编写
CSS
的时候,图片宽高应固定,图片拼合后才能通过定位和显示区域的宽高来展示图片。

举个例子,如果布局时
width: 100%; background-position: center;,使用工具拼合图片后,该元素区域(100%
的宽度)内会将其他图片显示出来,这不是我们想要看到的。

6. 关于链接的分享-QQ

如果将页面链接直接复制分享给其他人,在手机上接收链接消息的用户可能会看到链接的相关信息,如页面标题、描述和图片。相关信息设置方式如下:

<title>QQ中链接的标题由此处获取</title>
<meta name="description" content="QQ中链接的描述由此处获取">
<!-- QQ默认获取的图片有可能出现缩放问题,效果不佳,可以通过如下方法进行设置 -->
<meta itemprop="image" content="http://*.*.com/staticshare.png" />

可参考 手机QQ接口文档:setShareInfo

问题:即使使用了如上的 image 设置方法,还是没能显示预期图片?
解决:确定下你发送的链接格式,会不会有所省略,如:somedomain/ 或者 somedomain/index,正确的应为 somedomain/index.html,才能正确解析到图片。

如果是打开链接后,在QQ内置浏览器里选择将页面分享出去,那一般不会出错。


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图