저는 별도의 '모바일'사이트 디자인이 아니라 적응 형 웹 디자인 (즉, 모든 장치의 디스플레이를 조정하고보기 포트 크기에 따라 콘텐츠를 제공하는 하나의 디자인)과 함께 반응 형 웹 디자인을지지합니다.
예를 들어 대형 디스플레이에는 약간의 단점이 있습니다. 작은 뷰포트 크기로 숨길 수있는 일부 모듈을 포함하고 싶습니다. 그러나 뷰포트 크기에 따라 모듈이 숨겨져있는 경우 특정 모듈이 더 작은 뷰포트 크기로 표시되지 않는 것으로 알려진 경우 해당 모듈을로드하고 실행하면 불필요한 성능 저하가 발생합니다.
성능 향상을 위해 뷰포트 크기를 사용하여 모듈을 효과적으로 비활성화 (즉, 실행 중지)하는 방법은 무엇입니까?
답변:
고급 모듈 관리자 ( http://www.nonumber.nl/extensions/advancedmodulemanager )를 사용하면 브라우저 유형에 따라 모듈을 할당 할 수 있습니다. 따라서 모바일, 데스크탑 또는 특정 장치를 선택할 수 있습니다. 크기별로 선택할 수 없으므로 어느 정도 유용합니다.
PHP와 자바 스크립트의 조합으로 가능할 수도 있습니다. 이 질문을 내 친구에게 보내면 아이디어가있을 수 있습니다.
나는 당신이 그런 모듈을 비활성화시켜야한다고 생각하지 않으며 여전히 반응 형 디자인이라고 부릅니다. 반응 형 요점의 일부는 다른 화면 크기에 대해 다른 레이아웃을 인쇄하는 것이 아니라 뷰포트의 변경에 응답한다는 것입니다.
예제 화면 크기에 따라 세로 모드의 태블릿은 모듈을로드하지 않지만 가로 모드에서는 동일한 태블릿에 해당 내용이 한 번 필요할 수 있습니다.
이것은 자바 스크립트를 사용하여 뷰포트를 감지 할 수있는 JS 클래스입니다. 엄격한 테스트를 거치지 않았지만 작동합니다.
function ResJS(){
this.min = 0;
this.max = 0;
this.config = config;
this.width = function(){
return jQuery(window).width();
}
this.breakpoint = function(min,max){
this.min = min;
this.max = max;
this.outside = false;
this.inside = false;
this.triggeredOut = false;
this.triggeredIn = false;
this.enter = function(callback){
var context = this;
jQuery(window).on('resize',function(){
if(context.min<context.width()&&context.max>context.width()){
if(!context.triggeredIn){
jQuery(document).ready(function(){callback(context.min,context.max)});
context.inside = true; //browser width has entered breakpoint
context.outside = false; //browser has left another breakpoint
context.triggeredIn = true; //triggered event for breakpoint
context.triggeredOut = false; //be ready to trigger leave event
}
}else{
context.inside = false; //browser width is not within breakpoint
context.outside = true; //brower width is outside of breakpoint
}
});
if(context.min<context.width()&&context.max>context.width()){
jQuery(document).ready(function(){callback(context.min,context.max)});
context.inside = true;
context.outside = false;
context.triggeredIn = true;
context.triggeredOut = false;
}else{
context.inside = false;
context.outside = true;
context.triggeredOut = true;
context.triggeredIn = false;
}
return this;
}
this.leave = function(callback){
var context = this;
jQuery(window).on('resize',function(){
if(context.outside&&!context.triggeredOut){
jQuery(document).ready(function(){callback(context.min,context.max)});
context.triggeredIn = false;
context.triggeredOut = true;
}
});
return this;
}
return this;
}
return this;
}
기본적으로 당신은 이것을 이렇게 사용합니다
ResJS()
.breakpoint(0,600)
.enter(function(min,max){
console.log(min,max,'enter');
})
.leave(function(min,max){
console.log(min,max,'leave');
});
Breakpoint에는 너비에 대한 최소 / 최대 매개 변수가 있고, JS 코드를 실행하기위한 콜백과 함께 너비를 입력하고 떠나는 체인 함수가 있습니다.
나는 오래 전에 그것을 만들었으므로 어떻게 작동하는지 자세히 설명 할 수는 없지만 도움이된다면 자유롭게 사용할 수 있습니다. 뷰포트를 기반으로 아약스를 통해 모듈을로드하는 데 사용할 수 있습니다. joomla의 com_ajax를 이것과 함께 사용하여 정말 멋진 기능을 만들 수 있다고 생각합니다.
다른 해결책 :
다음과 같은 서버 측 장치 감지를 사용할 수 있습니다. http://mobiledetect.net/ 여기에 Joomla 플러그인 http://www.yagendoo.com/en/blog/free-mobile-detection-plugin-for-joomla.html 그런 다음 자신의 mod_chrome 스타일로 joomla / templates / yourtemplate / html / modules.php를 확장하십시오. 그런 다음 모든 장치 또는 해상도에 대해 원하는 수의 PHP if 문을 작성할 수 있습니다.
나는 일반적으로 css @media를 사용하여 이것을 수행합니다. 화면 크기에 따라 사물을 숨기고 가로 태블릿이 화면을 표시하기에 충분히 넓고 세로 너비가 아닌 경우 구문 분석하는 것이 간단합니다. 예를 들면 다음과 같습니다.
@media (max-width:699px) {
#moduleid, .modulewrapperclass {display:none}
}
나는 보통 이것을 사용하여 전체 모듈 위치를 숨기므로 CSS 선택기를 해당 위치의 래퍼 (또는 일부 템플릿의 위치)를 기준으로합니다.
미디어 쿼리와 함께 모듈 접미사를 사용할 수 있습니다. 많은 템플릿 프레임 워크에이 기능이 이미 내장되어있어 모바일에 표시되지 않도록 "숨겨진 전화"클래스를 추가 할 수 있습니다. 그들은 그것들을 CSS 헬퍼 클래스라고 부릅니다 :
갠트리 : http://www.gantry-framework.org/documentation/joomla/advanced/responsive_grid_system.md
워프 : http://www.yootheme.com/blog/2012/06/12/warp-gets-responsive