Home > Backend Development > PHP Tutorial > 嵌入app的h5页面如何自适应?

嵌入app的h5页面如何自适应?

WBOY
Release: 2016-06-06 20:08:20
Original
1862 people have browsed it

我是做php的,想在app里嵌入一个H5页面用来做签到页,H5如何写才能自适应与ios安卓与平板?

回复内容:

我是做php的,想在app里嵌入一个H5页面用来做签到页,H5如何写才能自适应与ios安卓与平板?

header加入viewport元标签是普遍做法,还有,不使用绝对宽度,字体使用相对大小,布局使用流动布局(fluid grid),图片要自适应(fluid image)等。

media query

Meta标签 viewport

我做的一个嵌入APP的页面使用rem来做单位

用Meta的viewport,content="width=device-width"

网页宽高用比例

media query或者使用rem,然后js动态判断屏幕大小来设置html中的rem的值

如果对设计没要求就直接用 bootstrap。如果要自己写就用media query 定义自己的 breakpoints。

这个是HTML做出来的自适应 但是客户端可以简易的写一些js做一些自适应

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template