H5ページの注意事項

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) を保存します。ページが作成されている場合は、上記のサイズに従ってコンテンツを調整したり、要素の間隔を減らしたり、画像のサイズを拡大したりすることしかできません。

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

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

1. としてレムを使用した場合でも、関連する間隔の単位では、2 つの高さ (WeChat/QQ) を切り替えるための適切な比率を見つける方法がないため、このようにして、たとえ WeChat の下に余分なスペースがある場合でも、QQ に適応するように均一に調整されます。固定された下部のガイダンスの下向き矢印は、あまり目立たないようにすることができます

2. 750*1334 ページの例
   2. モバイルブラウザのナビゲーションバーの幅は限られており、短いです。

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

コード例.png

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

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

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

img 标签引入，如下：

代码示例.png

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

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

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>
<!-- QQ默认获取的图片有可能出现缩放问题，效果不佳，可以通过如下方法进行设置 -->
<meta>

可参考 手机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 loading>🎜モバイル QQ <a href="http://www.php.cn/code/11829.html" target="_blank">Interface🎜Document: </a><a href="http://www.php.cn/code/8209.html" target="_blank">🎜ShareInfo を設定します。 🎜🎜🎜質問🎜: 上記の画像設定方法を使用しても、期待した画像が表示されません。 🎜🎜解決策🎜: <code>somedo<a href="http://www.php.cn/wiki/646.html" target=" _blank"> など、送信するリンク形式が省略されていることを確認してください。 main🎜/</a></code> または <code>somedomain/index</code> ですが、画像を正しく解析できるように、正しいものは <code>somedomain/index.html</code> である必要があります。 🎜<p>如果是打开链接后，在QQ内置浏览器里选择将页面分享出去，那一般不会出错。</p>
<h2 id="图片压缩">7. 图片压缩</h2>
<p>使用自动化工具 gulp-imagemin（教程） 来压缩图片，效果举例：<strong>101 KB => 80.7 KB</strong>。后来我使用了<a href="http://www.php.cn/xiazai/tool" target="_blank">在线工具</a> Tinypng 又进行了一次压缩，效果举例：（上面使用 gulp-imagemin 压缩过的图片）<strong>80.7 KB => 38.1 KB</strong>，可见光使用自动化工具来压缩是不够的，大部分图片仍存在较大的压缩空间，可以再扔到 Tinypng 里压缩一下看看。</p>
<blockquote><p>在线的 Tinypng 可以无限次使用，如果想要使用其 <a href="http://www.php.cn/js/js-weixinapp-api.html" target="_blank">API</a> 来进行压缩自动化的话，可以使用 gulp-tinypng 等插件，但是有每月压缩图片数量限制，每月前500张图片免费，其他收费情况参考官网说明。使用其 API 还需要获取 API <a href="http://www.php.cn/wiki/1051.html" target="_blank">Key</a>，这里可以获取。<br>个人觉得想要免费的话使用 API 会有数量限制，时刻惦记着数量有点心累，不如直接使用在线工具，也不麻烦~</p></blockquote>
<h2 id="Loading">8. Loading</h2>
<p>首屏 Loading，代码段分享，拿走即用~</p>
<pre class="brush:php;toolbar:false">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 中国語 Web サイトの他の関連記事を参照してください。