나는 모든 장치에서 거의 똑같이 보이는 사이트에서 작업하고 있습니다. 즉, 노트북, PC, 아이 패드, 아이폰 및 기타 스마트 폰.
사용자의 화면 해상도에 따라 웹 사이트에서 글꼴 크기를 줄이거 나 늘리기 위해 순수한 자바 스크립트 인 fittext.js를 사용하고 있습니다.
그러나 아이폰과 같은 장치에서는 글꼴이 매우 작습니다!
iPhone 및 기타 스마트 폰에서 글꼴 크기를 조금 더 늘리려면 어떻게해야합니까?
이것은 내가 사용하는 자바 스크립트 코드입니다.
fittext.js
(function(){
var css = function (el, prop) {
return window.getComputedStyle ? getComputedStyle(el).getPropertyValue(prop) : el.currentStyle[prop];
};
var addEvent = function (el, type, fn) {
if (el.addEventListener)
el.addEventListener(type, fn, false);
else
el.attachEvent('on'+type, fn);
};
window.fitText = function (el, kompressor) {
var settings = {
'minFontSize' : -1/0,
'maxFontSize' : 1/0
};
var fit = function (el) {
var compressor = kompressor || 1;
var resizer = function () {
el.style.fontSize = Math.max(Math.min(el.clientWidth / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)) + 'px';
};
// Call once to set.
resizer();
// Bind events
// If you have any js library which support Events, replace this part
// and remove addEvent function (or use original jQuery version)
addEvent(window, 'resize', resizer);
};
if (el.length)
for(var i=0; i<el.length; i++)
fit(el[i]);
else
fit(el);
// return set of elements
return el;
};
})();
그리고 이것은 내 HTML 페이지에 있습니다.
<script src="fittext.js"></script>
<script type="text/javascript">
fitText(document.getElementById('fittext'), 2.9)
</script>
Fittext의 권장 사용법은 정보 단락에 사용해서는 안된다고 말합니다. 모바일 사이트의 경우 모바일 뷰포트 세트가 있는지 확인한 다음 더 작은 장치의 글꼴 크기를 변경하는 가장 쉬운 방법은 미디어 쿼리를 사용하는 것입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다