모바일에서 텍스트 크게 하는법


슬라이더의 레이아웃을 "Auto Responsive"로 설정하면, 슬라이더가 모바일에서 반응할때 크기가 줄어 들면서 텍스트의 크기가 너무 작게 보여져서 의도와는 다른 느낌을 줄수도 있다.
이런 경우에 사용할 수 있는 방법이다.



1.모바일에서 너무 작아지는 텍스트 감추기

　　　　　

슬라이더의 메인세팅-"Mobile Visibility"섹션으로 가서 "Hide Defined Layers Under Width(이 크기 아래에서는 미리정의된 레이어가 감춰진다)" 필드에 적절한 값을 입력한다.




　　　　

그런후 슬라이드 편집화면으로 가서 감추고 싶은 텍스트가 들어 있는 레이어를 선택한후 "Layer Links & Advanced Params"섹션을 열어서,"Hide Under Width"에 체크해 준다. 그러면 위에서 설정한 넓이 이하가 되는 화면에서는 이 레이어가 사라진다.




　

2.모바일에서도 텍스트가 크게 보이게하기

아래 이미지는 화면이 풀사이즈일때(데스크탑) 슬라이더 내에서 텍스트의 크기가 의도한 크기 대로 나타날때의 예이다.




　

그런데 이 슬라이더가 모바일 기기에서 보여 질때는 아래의 이미지처럼 텍스트의 크가가 의도와는 다르게 너무 작아졌다.




같은 텍스트를 이제부터는 아래의 이미지 처럼 나타나게 할 것이다.




  1. 작업하려는 레이어의 텍스트로 가서 텍스트 앞/뒤로 span태그를 넣는다. (태그안에은 class="zoom-this" 을 포함시킨다.)
    새로운 태그로 감싸는 이유는 이 태그와 크래스를 이용해서 이외의 레이어들과는 약간 다른 행동을 하도록 만들기 위해서다.



  2. 이제 메인 슬라이더 세팅화면으로 가서, 왼쪽 아랫부분의 "API Functions"섹션으로 가서 현재 당신이 작업중인 슬라이더의 API 이름이 무었인지를 확인한다.(아래 이미지 에서는 revapi1 이다.)



  3. 맨 아래의 소스코드를 "CSS/Javascript"섹션의 "Custom JavaScript"칸에 복사해 넣는다



  4. 마지막으로 세번째 줄의 var api = revapi1 에서 당신의 API이름으로 바꿔준다.
    ( 소스내의 주석을 보면서 커스터마이징이 가능하다.)

    (function($) {
 
 // 바로 아래에 "revapi1"라는 이름을 당신의 슬라이더 API이름으로 바꾼다.
 var api = revapi1,
 
 // 당신 슬라이더의 Grid Width 값을 적는다.
 // 넣지 않는다면 자동으로 값을 가져온다.
 gridWidth = 0,
 
 // 레이어에 적용한 크래스나 아이디 이름을 적는다.
 zoomSelector = '.zoom-this',
 
 // 레이어의 어느곳을 기준점(CSS transformOrigin)으로 크기를 재 조정할것인지 정의
 // %단위를 사용해도 되고, left,center,right 와 top,center,bottom 으로 정의해도 된다.
 scaleFrom = 'center center',
 
 // 슬라이더의 스케일이 "firstScaleCheck"에서 설정한것과
 // 아래 "secondScaleCheck" 에서 설정한 사이의 값이 되면  
 // 해당레이어의 스케일을 "firstScaleAmount"에서 설정한 값으로 조정
 firstScaleCheck = 0.5, 
 firstScaleAmount = 0.35,
 
 // 슬라이더의 스케일이 "secondScaleCheck"에서 설정한 값 이하가 되면, 
 //  해당레이어의 스케일을 "secondScaleAmount" 에서 설정한 값으로 조정
 secondScaleCheck = 0.25,
 secondScaleAmount = 0.75,
 
 // 이하는 커스터마이징 할 것이 없다.
 slider = $('.rev_slider_wrapper');
 if(!slider.length) return;
 
 var temp = slider[0].style,
 transform = 'transform' in temp ? 'transform' : 
 'WebkitTransform' in temp ? 'WebkitTransform' : 
 'MozTransform' in temp ? 'MozTransform' : 
 'msTransform' in temp ? 'msTransform' : 
 'OTransform' in temp ? 'OTransform' : null;
 
 if(!gridWidth) {
 
 var script = slider.closest('.rev_slider_wrapper').find('script').text();
 if(script) gridWidth = parseInt(script.split('startwidth:')[1].split(',')[0], 10);
 
 }
 
 if(!gridWidth || !transform) return;
 
 var plus,
 origin = 'transformOrigin' in temp ? 'transformOrigin' : 
 'WebkitTransformOrigin' in temp ? 'WebkitTransformOrigin' : 
 'MozTransformOrigin' in temp ? 'MozTransformOrigin' : 
 'msTransformOrigin' in temp ? 'msTransformOrigin' : 
 'OTransformOrigin' in temp ? 'OTransformOrigin' : null,
 
 items = slider.find(zoomSelector).each(function() {this.style[origin] = scaleFrom;});
 api.on('revolution.slide.onloaded', function() {
 
 sizer();
 $(window).on('resize', sizer);
 
 });
 
 function sizer() {
 
 var scaled = Math.min(slider.width() / gridWidth, 1).toFixed(2);
 plus = scaled < 1 ? (1 - parseFloat(scaled)) + 1 : 1;
 
 if(scaled < firstScaleCheck) {
 plus = scaled > secondScaleCheck ? plus + firstScaleAmount : plus + secondScaleAmount;
 }
 
 items.each(sizeEach);
 
 }
 
 function sizeEach() {
 
 this.style.display = 'inline-block';
 this.style[transform] = 'scale(' + plus + ', ' + plus + ')';
 
 }
 
})(jQuery);