应用CSS新闻媒体查寻和JavaScript分辨访问器机器设

日期:2020-10-21 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

有没有数的理由规定大家在任什么时候候都应当了解客户是应用的甚么机器设备访问大家的网站——宽屏,一般屏,平板,手机上?了解这些特点,大家web运用的CSS和JavaScript才可以同歩做相应的实际操作。在给Mozilla Developer Networks改版设计方案的全过程中,我发现应用CSS新闻媒体查寻(media queries)尽管十分的合理,但有时,JavaScript却不可以立即了解客户访问机器设备的情况。访问网站的客户应用的是桌面上电脑上,還是平板,還是手机上?这针对CSS来讲很非常容易,但CSS却没法将这些信息内容告知JavaScript。我创造发明了1种根据CSS新闻媒体查寻和z-index特性的方式,能告知JavaScript客户当今应用的是甚么显示屏,这样我能调剂JavaScript的姿势来回应这类显示屏尺寸。

CSS编码

最先最关键的還是CSS新闻媒体查寻编码。这里只是示例,大家建立了3个新闻媒体查寻标准(但不包含缺省的“all”),它能操纵4种显示屏状况:桌面上(这是缺省情况,不必须新闻媒体查寻标准),“小显示屏”,平板,手机上。对于每种显示屏,大家给它1种不一样的z-index值,这个值大家能够用JavaScript检验到。大家把这个元素精准定位到显示屏外,这样它就不容易显示信息出来;记牢,它的功效便是储放z-index值,大家要用javaScript获得这个值。


拷贝编码
编码以下:

/* 缺省显示屏 */
.state-indicator {
position: absolute;
top: ⑼99em;
left: ⑼99em;
z-index: 1;
}
/* 小显示屏 */
@media all and (max-width: 1200px) {
.state-indicator {
z-index: 2;
}
}
/* 平板 */
@media all and (max-width: 1024px) {
.state-indicator {
z-index: 3;
}
}
/* 手机上 */
@media all and (max-width: 768px) {
.state-indicator {
z-index: 4;
}
}

每种z-index都在告知大家的JavaScript当今的客户应用的是甚么规格型号的显示屏。大家其实不像了解客户到底应用的是甚么机器设备,由于你能够将访问器宽度拉的很窄,但大家必须便是可视性宽度,这样大家能够调剂运用的合理布局。

JavaScript编码

或许你觉得能够在DomContentLoaded时了解显示屏的尺寸,但大家必须即时了解显示屏的尺寸(由于客户会调剂访问器对话框的尺寸),大家必须有个方式获得当今对话框的特性:

拷贝编码
编码以下:

// 建立情况标示元素
var indicator = document.createElement('div');
indicator.className = 'state-indicator';
document.body.appendChild(indicator);
// 获得机器设备种别的方式
function getDeviceState() {
return parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10);
}

应用这个方式,你就可以检验出网页页面合理布局/js饰件中那些必须显示信息,那些必须掩藏。

拷贝编码
编码以下:

if(getDeviceState() < 3) { // 假如是桌面上电脑上后小显示屏电脑上
// 显示信息js饰件....
}

有人或许会觉得这些数据太非常容易搞错,让编码很难维护保养。实际上大家能够用1个目标来解决这类事儿:

拷贝编码
编码以下:

function getDeviceState() {
var index = parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10);
var states = {
2: 'small-desktop',
3: 'tablet',
4: 'phone'
};
return states[index] || 'desktop';
}

这样,你就1个写出更具可读性的逻辑性分辨:

拷贝编码
编码以下:

if(getDeviceState() == 'tablet') {
// Do whatever
}

或许应用CSS的伪元素的content特性是个更好的方式:

拷贝编码
编码以下:

.state-indicator {
position: absolute;
top: ⑼99em;
left: ⑼99em;
}
.state-indicator:before { content: 'desktop'; }
/* 小显示屏桌面上 */
@media all and (max-width: 1200px) {
.state-indicator:before { content: 'small-desktop'; }
}
/* 平板 */
@media all and (max-width: 1024px) {
.state-indicator:before { content: 'tablet'; }
}
/* 手机上 */

用下面的JavaScript方式获得重要的內容:

拷贝编码
编码以下:

var state = window.getComputedStyle(
document.querySelector('.state-indicator'), ':before'
).getPropertyValue('content')

怎样机构这些编码全看你自身了。假如你有1个全局性目标,比如window.config或window.app等,你能够把这些方式放到里边。我趋向于控制模块化这些作用,你能够把它做成jQuery软件或JavaScript专用工具包。无论你怎样完成,它们全是你值得信赖的、简易易用的检验客户机器设备的好方式。

更上1层楼

大家了解显示屏尺寸会产生转变——客户手工制作调剂访问器大中型或手机上客户调剂了手机上方位,因此,当这些恶性事件产生时,大家必须让系统软件告知大家。下面这段简易的编码估算是你必须的:

拷贝编码
编码以下:

var lastDeviceState = getDeviceState();
window.addEventListener('resize', debounce(function() {
var state = getDeviceState();
if(state != lastDeviceState) {
// 维持当今的情况
lastDeviceState = state;
// 宣布情况转变,根据自定的DOM恶性事件或JS 信息公布/定阅方式,
// 我喜爱后者,全部就假定应用了1个这样的专用工具库
publish('/device-state/change', [state]);
}
}, 20));
// 用法
subscribe('/device-state/change', function(state) {
if(state == 3) { // or "tablet", if you used the object
}
});

留意,这里我应用了debounce方式来实行resize恶性事件产生时的姿势——这针对特性来讲十分关键。是应用自定DOM恶性事件還是应用公布/定阅方式,你随意挑选,由于都很简易。

我感觉这类方式十分的好。有人将会会指出应用matchMedia还可以有同样实际效果,但难题是你必须在CSS里和JavaScript里都应用新闻媒体查寻,而一些新闻媒体查寻句子将会会很繁杂,乃至会变成你的恶梦,比不上应用简易的z-index。也是有人会说可使用 window.innerWidth来分辨,但这样JS里获得的特性和CSS里的新闻媒体查寻就必须互相变换了,一样也会变成你的恶魔。我的方式的益处就在于你能够用它分辨别的种类的新闻媒体查寻特性,比如查验手机上是横向(landscape)還是竖向(portrait)。

无论如何,你能够试1下,告知我你的觉得!