H5 페이지에서 참고할 사항

1. 한 페이지에 너무 많은 콘텐츠가 있으면 안 됩니다

일반적인 디자인 크기: 750 x 1334 / 640 x 1134, 휴대폰 상단의 신호 막대 높이 포함.

모바일 H5 이벤트 페이지는 다양한 소셜 앱에 공유해야 하는 경우가 많으며 일반적으로 사용되는 앱으로는 WeChat, QQ 등이 있습니다.

모바일 기기를 사용하여 페이지를 보면 WeChat 브라우저에 상위 내비게이션 바, QQ 내장 브라우저에는 상단 내비게이션뿐만 아니라 하단에 작업 바도 있습니다( 사파리 브라우저도 마찬가지입니다.) 디자인 초안 표시 영역을 차지하므로 디자인 과정에서는 콘텐츠의 양을 고려하여 일정한 공간을 남겨두어야 합니다. WeChat이나 QQ에서 차단되지 않도록

아래와 같이(QQ 내장 브라우저) : 페이지 디자인 크기는 750 x 1334로 상단을 차지합니다. 150px, 하단 110px를 차지하며 총 260px을 차지하므로 코드 작성 시 디자인 초안 내용은 1334-260=1074px 내에서 조절해야 합니다. 모바일 페이지 효과를 실시간으로 보실 수 있도록 기기 크기를 설정하고 크기(750*1074)를 저장해 두었습니다. 요소 사이에서 이미지 크기 조정 등을 시도합니다. 실패한 시도:

전체 페이지의 크기가 조정된 경우(메타를 사용하여) 태그) 디자인 도안의 비율에 따라 높이가 충분하면 너비가 작아지고, 양쪽이 흰색 배경이 됩니다.

렘을 사용해도; 해당 간격의 단위로는 두 높이(WeChat/QQ) 사이를 전환하기에 적합한 비율을 찾을 방법이 없으므로 적절한 QQ 장착으로 조정되므로 WeChat 아래에 여유 공간이 있어도 고정된 하단 탐색 화살표를 사용하면 너무 눈에 띄지 않게 됩니다. 750*1334 페이지 예시

2. 짧은 제목

1. 모바일 브라우저 탐색 표시줄 너비가 제한되어 있으므로 짧은 제목으로 만들 수 있습니다. 완료.

3. QR 코드 이미지를 삽입하려면 img 태그를 사용하세요. QR 코드 이미지를 요소 배경으로 쓰지 마세요. 길게 누르면 스캔 기능이 실행되지 않습니다.

2. <.>

코드 샘플.png

테스트를 위해 QR 코드 이미지를 스캔하는 것을 잊지 마세요

QR 코드를 스캔한 후 특정 주소로 이동하는 경우가 있는데, 문제가 발생하면 QQ 또는 WeChat에서 아래와 같이 이 주소로 알림 메시지를 보냅니다.

QQ의 따뜻한 알림

이렇게 하면 일부 사용자의 접속이 계속 차단되어 이벤트에서 홍보하려는 제품/브랜드 페이지로 사용자를 안내할 수 없게 됩니다. 앱의 다운로드 페이지로 따라서 QR코드 스캔 테스트는 필수입니다.

img

예를 들어 QR 코드 스캔 결과가 애플리케이션의 다운로드 주소인 경우 App Store의 마이크로 다운로드 주소를 사용하여 QR 코드를 생성할 수 있습니다. " .

5. Gulp를 사용하여 이미지 결합

먼저 레이아웃한 다음 자동화 도구를 사용하여 이미지를 결합하여 요청 수를 줄이려면 다음을 참고하세요. CSS 작성, 이미지 너비 높이는 고정되어야 하며, 그림이 결합된 후에야 해당 영역의 너비와 높이를 위치 지정하여 표시하여 그림을 표시할 수 있습니다.

예를 들어 레이아웃이 <a href="http://www.php.cn/wiki/835.html" target="_blank">너비<p>인 경우 : 100%; <a href="http://www.php.cn/wiki/896.html" target="_blank">배경 위치</a></p>: center;</a>, 도구를 사용한 후 이미지를 결합하면 다른 이미지가 요소 영역(너비 100%) 내에 표시되지만 이는 우리가 보고 싶은 것이 아닙니다.

6. 링크 공유-QQ 소개

페이지 링크를 직접 복사하여 다른 사람과 공유하면 휴대폰으로 링크 메시지를 받은 사용자는 관련 정보를 볼 수 있습니다. 페이지 제목, 설명, 이미지 등의 링크입니다. 관련 정보 설정 방법은

<title>QQ中链接的标题由此处获取</title>
<meta>
<!-- QQ默认获取的图片有可能出现缩放问题，效果不佳，可以通过如下方法进行设置 -->
<meta>

모바일QQ

인터페이스

문서

set

ShareInfo를 참고하세요.

질문

: 위의 이미지 설정 방법을 사용해도 여전히 예상한 이미지가 표시되지 않나요?

해결책

: 보내는 링크 형식이 다음과 같이 생략되는지 확인하세요. somedo<a href="http://www.php.cn/wiki/646%20.html" target="_blank">main<code><a href="http://www.php.cn/wiki/835.html" target="_blank">width</a>: 100%; <a href="http://www.php.cn/wiki/896.html" target="_blank">background-position</a>: center;/ 또는

, 이미지를 올바르게 구문 분석하려면 올바른 것이

이어야 합니다.

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

7. 图片压缩

使用自动化工具 gulp-imagemin（教程） 来压缩图片，效果举例：101 KB => 80.7 KB。后来我使用了在线工具 Tinypng 又进行了一次压缩，效果举例：（上面使用 gulp-imagemin 压缩过的图片）80.7 KB => 38.1 KB，可见光使用自动化工具来压缩是不够的，大部分图片仍存在较大的压缩空间，可以再扔到 Tinypng 里压缩一下看看。

在线的 Tinypng 可以无限次使用，如果想要使用其 API 来进行压缩自动化的话，可以使用 gulp-tinypng 等插件，但是有每月压缩图片数量限制，每月前500张图片免费，其他收费情况参考官网说明。使用其 API 还需要获取 API Key，这里可以获取。
个人觉得想要免费的话使用 API 会有数量限制，时刻惦记着数量有点心累，不如直接使用在线工具，也不麻烦~

8. Loading

首屏 Loading，代码段分享，拿走即用~

function loading(){

    function Load(){}

    Load.prototype.loadImgs = function(urls,callback) {
        this.urls = urls;
        this.imgNumbers = urls.length;
        this.loadImgNumbers = 0;
        var that =this;
        for(var i=0;i<urls.length loading><h2 id="CSS-a-href-http-www-php-cn-html-html-mip-animate-html-target-blank-动画-a-a-href-http-www-php-cn-wiki-html-target-blank-属性-a-前缀-webkit">9. CSS <a href="http://www.php.cn/html5/html5-4-mip-animate.html" target="_blank">动画</a><a href="http://www.php.cn/wiki/169.html" target="_blank">属性</a>前缀 webkit</h2>
<p>使用 CSS3 来制作动画效果的话，<code>webkit</code> 前缀一定记得加，要不然在某些手机下动画效果是没有的。<br>如下：</p>
<pre class="brush:php;toolbar:false">-webkit-animation: f .8s 2s forwards ease-in-out;
animation: f .8s 2s forwards ease-in-out;

@-webkit-keyframes f {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(750px,0,0);
        transform: translate3d(750px,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes f {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(750px,0,0);
        transform: translate3d(750px,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

推荐使用自动化工具来处理未加前缀的 CSS 文件，如 gulp-autoprefixer。

10. Swiper.js & Animate.css

你只需要 Swiper.js 和 Animate.css 即可打造（简单的）移动端 H5 活动页面~
Swiper 是纯 javascript 打造的滑动特效插件，面向手机、平板电脑等移动终端。
Animate.css 是纯 CSS 编写而成的动画库，包含多种常见的 CSS 动画。
引用 Swiper.js，同时在 Animate.css 中寻找需要的动画效果复制粘贴进 css 文件即可，完全不必引用 Animate.css。

11. 使用 Meta 标签进行页面缩放

<!-- 以下代码默认设计稿尺寸为 640 x 1134 -->
<meta>
<script>
    var detectBrowser = function(name) {
        if(navigator.userAgent.toLowerCase().indexOf(name) > -1) {
            return true;
        } else {
            return false;
        }
    };
    var width = parseInt(window.screen.width);
    var scale = width/640;  // 根据设计稿尺寸进行相应修改：640=>?
    var userScalable = &#39;no&#39;;
    if(detectBrowser("qq/")) userScalable = &#39;yes&#39;;
    document.getElementById(&#39;viewport&#39;).setAttribute(
            &#39;content&#39;, &#39;target-densitydpi=device-dpi,width=640,user-scalable=&#39;+userScalable+&#39;,initial-scale=&#39; + scale); // 这里也别忘了改：640=>?
</script>

利用 meta 标签对页面进行缩放，使得我们可以直接根据设计稿来进行页面的编写，不用再进行单位的换算等等，省却了很多麻烦。

12. 微信二维码问题

01：同一个页面里要是有两个二维码，长按扫描总是只能扫出 左侧/第一个 二维码。
解决：可视区域内只能出现一个二维码。

02：使用 meta 标签缩放页面后长按二维码图片无反应。
解决：使用了以下代码之后，就能长按识别二维码了~

<!--同一张二维码图片-->
<!--下面这张 opacity 为 0，隐藏起来，但是实际存在，并且宽为 100%，屏幕有多大就多大-->

<!--下面这张是呈现给用户看的-->

<!--PS: img 标签前面的空格记得去掉，这里加上空格是因为有 bug，针对 img 标签代码渲染会出错-->

위 내용은 H5 페이지에서 참고할 사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!