H5 페이지에서 참고할 사항
- PHPz원래의
- 2017-04-04 13:57:352260검색
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. 짧은 제목
모바일 브라우저 탐색 표시줄 너비가 제한되어 있으므로 짧은 제목으로 만들 수 있습니다. 완료.
3. QR 코드 이미지를 삽입하려면 img 태그를 사용하세요. QR 코드 이미지를 요소 배경으로 쓰지 마세요. 길게 누르면 스캔 기능이 실행되지 않습니다. <.>
테스트를 위해 QR 코드 이미지를 스캔하는 것을 잊지 마세요
img
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 name="description" content="QQ中链接的描述由此处获取"> <!-- QQ默认获取的图片有可能出现缩放问题，效果不佳，可以通过如下方法进行设置 --> <meta itemprop="image" content="http://*.*.com/static/images/share.png" />
모바일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;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+'%');
// 加载结束后，隐藏相应的 loading 或遮罩
if(percent==100) {
$(".mask").css('display','none');
}
});
}
// 执行 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!