H5ページの注意事項-htmlチュートリアル-php.cn

1. 1 つのページに多すぎるコンテンツを含めることはできません

一般的なデザインの寸法: 750 x 1334 / 640 x 1134 (電話機上部の信号バーの高さを含む)。

Mobile H5 イベントページは、さまざまなソーシャルアプリで共有する必要があることがよくあります。一般的に使用されるアプリには、 WeChat、QQ などが含まれます。

モバイルデバイスを使用してページを表示すると、上部のナビゲーションバーがあることがわかります。 QQ ビルトインで閲覧できる WeChat ブラウザーブラウザーには、上部ナビゲーションだけでなく、下部に操作バーもあります (Safari ブラウザーでも同様です)。これらは表示領域を占めます。したがって、デザインプロセスではコンテンツの量を考慮する必要があり、ページの下部はWeChatでブロックされないように一定量の空白スペースを確保する必要がありますまたは QQ

以下に示すように (QQ 内蔵ブラウザ): ページのデザインサイズは 750 x 1334 で、上部が 150 ピクセル、下部が 110 ピクセル、合計 260 ピクセルを占めるため、デザインドラフトのコンテンツは高さ以内に制御する必要があります。コードを記述するときは、

Chrome ブラウザを使用して、モバイル端末でリアルタイムに表示できるようにサイズ (750*1074) を保存します。ページが作成されている場合は、上記のサイズに従ってコンテンツを調整したり、要素の間隔を減らしたり、画像のサイズを拡大したりすることしかできません。

私の失敗した試みを共有してください:

ページ全体を（メタタグを使用して）拡大縮小し、デザイン案の比率に応じて、高さが十分な場合は幅が小さくなり、両側に白い背景が表示されます

としてレムを使用した場合でも、関連する間隔の単位では、2 つの高さ (WeChat/QQ) を切り替えるための適切な比率を見つける方法がないため、このようにして、たとえ WeChat の下に余分なスペースがある場合でも、QQ に適応するように均一に調整されます。固定された下部のガイダンスの下向き矢印は、あまり目立たないようにすることができます
750*1334 ページの例
2. モバイルブラウザのナビゲーションバーの幅は限られており、短いです。

3. コード画像は img タグを使用してインポートする必要があります。要素の背景として QR コード画像を書き込まないでください。そうしないと、長押ししてもスキャン機能がトリガーされません。 code>img タグを使用してインポートします。次のようにします。 >

H5ページの注意事項
コード例.png

4. テストするために QR コードの画像をスキャンすることを忘れないでください

残念ながら、QR コードの後に、特定のアドレスにジャンプします。以下に示すアドレス:

H5ページの注意事項

QQ での温かいリマインダー

img 标签引入，如下：

H5ページの注意事項

代码示例.png

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

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

H5ページの注意事項

QQ内的温馨提醒

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

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

5. 使用 Gulp 拼合图片

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

举个例子，如果布局时 <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;，使用工具拼合图片后，该元素区域（100% 的宽度）内会将其他图片显示出来，这不是我们想要看到的。

6. 关于链接的分享-QQ

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

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

ログイン後にコピー

可参考手机QQ接口文档：setShareInfo。

问题：即使使用了如上的 image 设置方法，还是没能显示预期图片？
解决：确定下你发送的链接格式，会不会有所省略，如：somedo<a href="http://www.php.cn/wiki/646.html" target="_blank">main</a>/ 或者 somedomain/index，正确的应为 somedomain/index.htmlこれにより、一部のユーザーがアクセスを継続できなくなり、イベントで宣伝したい商品やアプリダウンロードページなどのブランドページなどにユーザーを誘導できなくなります。そのため、QRコードの読み取りテストは必須となります。

🎜🎜たとえば、QR コードのスキャン結果がアプリケーションのダウンロードアドレスである場合、App Store のマイクロダウンロードアドレスを使用して QR コードを生成できますが、「ウォームリマインダー」は表示されません。 🎜🎜🎜5. Gulp を使用して画像を結合します🎜🎜 最初にレイアウトし、その後自動ツールを使用して画像を結合してリクエストの数を減らす場合は、次の点に注意してください: CSS を記述するときは、画像の幅と高さを指定する必要があります。画像を結合した後、画像を表示する表示領域の幅と高さを固定できます。 🎜🎜🎜たとえば、レイアウトが

<a href="http://www.php.cn/wiki/835.html" target="_blank">width🎜: 100%; "http://www.php.cn/wiki/896.html" target="_blank">background-position🎜: center;</a>

、ツールを使用して画像を結合した後、要素領域 (100%) width) 内側には他の画像が表示されますが、これは私たちが見たいものではありません。 🎜🎜🎜6. リンク共有について - QQ🎜🎜 ページのリンクを直接コピーして他の人に共有すると、携帯電話でリンクメッセージを受信したユーザーには、ページのタイトル、説明、画像などのリンクに関する関連情報が表示される場合があります。。関連情報は次のように設定されています: 🎜

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;i++){
            var obj = new Image();
            obj.src = urls[i];
            obj.onload = function(){
                that.loadImgNumbers++;
                callback(parseInt((that.loadImgNumbers/that.imgNumbers)*100));
            }
        }
    };

    var loader = new Load();

    loader.loadImgs([
        // 将所有需要加载的图片地址写于此处
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png"
    ],function(percent){
        // 假设显示百分比的元素为 $(".percent")
        $(".percent").text(percent+&#39;%&#39;);

        // 加载结束后，隐藏相应的 loading 或遮罩 
        if(percent==100) {
            $(".mask").css(&#39;display&#39;,&#39;none&#39;);
        }
    });
}

// 执行 loading 方法
loading();

ログイン後にコピー

🎜モバイル QQ Interface🎜Document: 🎜ShareInfo を設定します。 🎜🎜🎜質問🎜: 上記の画像設定方法を使用しても、期待した画像が表示されません。 🎜🎜解決策🎜:

somedo<a href="http://www.php.cn/wiki/646.html" target=" _blank"> など、送信するリンク形式が省略されていることを確認してください。 main🎜/

または somedomain/index ですが、画像を正しく解析できるように、正しいものは somedomain/index.html である必要があります。 🎜

如果是打开链接后，在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;i++){
            var obj = new Image();
            obj.src = urls[i];
            obj.onload = function(){
                that.loadImgNumbers++;
                callback(parseInt((that.loadImgNumbers/that.imgNumbers)*100));
            }
        }
    };

    var loader = new Load();

    loader.loadImgs([
        // 将所有需要加载的图片地址写于此处
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png"
    ],function(percent){
        // 假设显示百分比的元素为 $(".percent")
        $(".percent").text(percent+&#39;%&#39;);

        // 加载结束后，隐藏相应的 loading 或遮罩 
        if(percent==100) {
            $(".mask").css(&#39;display&#39;,&#39;none&#39;);
        }
    });
}

// 执行 loading 方法
loading();

ログイン後にコピー

9. CSS 动画 属性前缀 webkit

使用 CSS3 来制作动画效果的话，webkit 前缀一定记得加，要不然在某些手机下动画效果是没有的。
如下：

-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 id="viewport" content="width=device-width, user-scalable=yes,initial-scale=1" name="viewport" />
<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 = 'no';
    if(detectBrowser("qq/")) userScalable = 'yes';
    document.getElementById('viewport').setAttribute(
            'content', 'target-densitydpi=device-dpi,width=640,user-scalable='+userScalable+',initial-scale=' + scale); // 这里也别忘了改：640=>?
</script>

ログイン後にコピー

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

12. 微信二维码问题

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

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

<!--同一张二维码图片-->
<!--下面这张 opacity 为 0，隐藏起来，但是实际存在，并且宽为 100%，屏幕有多大就多大-->
< img style="right:0; top:0; height: auto;width: 100%;opacity: 0;position: absolute;" src="二维码图片地址">
<!--下面这张是呈现给用户看的-->
< img src="二维码图片地址" title="qrcode" alt="qrcode">
<!--PS: img 标签前面的空格记得去掉，这里加上空格是因为有 bug，针对 img 标签代码渲染会出错-->

ログイン後にコピー

以上がH5ページの注意事項の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。