首页 > 代码库 > h5开发与pc开发的差异性

h5开发与pc开发的差异性

 

1. viewport
技术分享

将layout viewport 设置成ideal viewport 。

width=device-width,也可以设置 initial-scale=1,最好两者都有. width =device-width 兼容IE。

viewport 分为layout viewport、 visual viewport   和 ideal viewport三类。

移动设备默认的viewport是layout viewport。

layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取 。

visual viewport的宽度可以通过window.innerWidth 来获取,浏览器可视区域的大小。

2. max-width 与 max-device-width 的区别 

1、max-device-width是设备整个显示区域的宽度,例如,真实的设备屏幕宽度。

2、max-width是目标显示区域的宽度,例如,浏览器宽度。

3、如果使用max-device-width,那么在PC浏览器上浏览网页时,缩小或放大浏览器时是不执行CSS的,因为“PC设备”没有变化。但如果使用max-width,缩小或放大浏览器时是执行CSS的,因为“显示区域”即浏览器大小发生了变化。

4、如果使用max-device-width,那么当手机由竖变横时,CSS是不执行的,因为“手机宽度”并没有变化。如果使用max-width,那么当手机由竖变横时,CSS是执行的,因为“显示区域”发生了变化。 

3. rem、em 、px

rem 相对根节点html的字体大小来计算。em 相对父节点的字体大小来计算。px 页面按精确像素展示。

4.flex布局

 技术分享

 

Flexbox布局最适合应用程序的组件和小规模的布局。

5. iPhone下的默认样式
 技术分享

 

 

-webkit-tap-highlight-color这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景,禁用颜色设置为0即可。

iOS下的safari中有默认的按钮样式:

 技术分享

 

 

6.微信分享的问题

微信分享,会自动加上一些参数:

朋友圈   from=timeline

微信群   from=groupmessage

好友分享 from=singlemessage

 

7.js获取url
window.location.search 获取参数部分
window.location.pathname 获取文件地址
 
8.touch事件
//绑定屏幕上下滑动事件
var startX, startY, currentTarget;
$(‘.session‘).bind(‘touchstart‘, function (e) {
//先触发touch事件,然后触发click事件 ,防止触发手机自带浏览器滚动条
// e.preventDefault();
startX = e.originalEvent.changedTouches[0].pageX;
startY = e.originalEvent.changedTouches[0].pageY;
currentTarget = e.currentTarget;
});
$(‘.session‘).bind(‘touchmove‘, function (e) {
e.preventDefault();
const moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if (Math.abs(X) > Math.abs(Y) && X > 0) {
console.log("从左往右划动");
} else if (Math.abs(X) > Math.abs(Y) && X < 0) {
console.log("是从右往左划动");
} else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
console.log("从上往下划");
} else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
console.log("从下往上划动");
}
});

注: touchmove事件可以禁止手机自带浏览器滚动条

技术分享

touchstar事件禁止的话,同时也会禁止点击事件。

h5开发与pc开发的差异性