대화형 웹 페이지 개발에서 배운 해킹

The Journey of Blood 및 Blood Bag Rush 두 개의 대화식 웹 페이지를 개발하는 동안 많은 것을 배웠습니다. 다음은 몇 가지 흥미로운 결과입니다.

스크롤바 높이

때로는 브라우저의 스크롤 막대가 웹 페이지의 콘텐츠를 덮지 않도록 하기 위해;



스크롤 막대의 너비에서 페이지 크기를 빼야 합니다.

const scrollBarWidth = () => {
    let inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";

    let outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild(inner);

    document.body.appendChild(outer);
    let w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    let w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;
    document.body.removeChild(outer);

    return (w1 - w2);
};

따라서 다음과 같이 표시됩니다.



http://www.alexandre-gomes.com/?p=115에 대한 크레딧입니다.

동적 뷰포트 높이

뷰포트의 높이에 요소를 맞추려면 높이를 100vh 로 설정해야 한다고 생각하는 경우가 많습니다. 안타깝게도 스크롤할 때 주소 표시줄이 사라지는 경우가 많기 때문에 모바일 장치를 대상으로 할 때 골칫거리가 될 수 있습니다. 모든 주요 브라우저가 지원 dv* units할 때까지 자체 배율 단위를 만들 수 있습니다. CSS에서:

#main-container {
    height: calc(var(--dvh, 1vh) * 100);
}

자바스크립트에서:

let dvh = window.innerHeight * 0.01;
document.documentElement.style.setProperty("--dvh", dvh + "px");

이 기술은 정의된 종횡비로 요소를 처리할 때 더 많이 사용됩니다. iPad에 다음이 있다고 가정합니다.



예를 들어 글꼴 크기를 다음과 같이 설정할 수 있습니다.

.title {
    font-size: calc(var(--dvh, 1vh) * 15);
}

하지만 iPhone에는 대신 다음이 있습니다.



글꼴 크기가 예상대로 확장되지 않습니다. 이 상황을 없애기 위해 다음과 같이 할 수 있습니다. CSS에서:

.title {
    font-size: calc(var(--dch, 1vh) * 15);
}

자바스크립트에서:

// Resize the container to fit the screen
let mainContainer = document.getElementById("main-container");
...

// Create a custom unit
let dch = mainContainer.style.height * 0.01;
document.documentElement.style.setProperty("--dch", dch + "px");

따라서 다음과 같이 표시됩니다.



https://css-tricks.com/the-trick-to-viewport-units-on-mobile/에 대한 크레딧입니다.

특정 브라우저 식별

훌륭한 웹 개발자로서 우리는 서로 다른 운영 체제에서 실행되는 모든 대상 브라우저에서 웹 페이지가 똑같이 정확하게 표시되도록 해야 합니다. 정확히 동일할 필요는 없습니다. 슬프게도, 우리는 이것을 얻었습니다:



아래와 같이 CSS를 사용합니다.

#start-button {
    padding: calc(var(--canvasHeight, 1vh) * 0.75) 0;
    padding-bottom: calc(var(--canvasHeight, 1vh) * 1.0);
    font-size: calc(var(--canvasHeight, 1vh) * 8);
    ...
}

자세히 살펴보겠습니다. 크롬에서:



파이어폭스에서:



보다? 이것은 this "bug"과 관련이 있다고 생각합니다.

누군가가 더 나은 솔루션을 찾았을 수도 있지만 Chrome과 다른 것에는 덕 타이핑 기법으로 별도의 스타일을 적용해야 한다고 생각합니다.

예를 들어 다음을 추가할 수 있습니다.

/*
 * Chrome-only CSS hacks
 **/
@supports (not (-webkit-hyphens: none)) and (not (-moz-appearance: none)) and (list-style-type:"*") {
  #start-button {
      padding-bottom: calc(var(--canvasHeight, 1vh) * 2.0);
  }
}

다음과 같이 보일 수 있습니다.



https://browserstrangeness.github.io/css_hacks.html에 대한 크레딧입니다. 자세한 내용은 해당 페이지로 이동하십시오.

드문 경우지만 삼성 인터넷 및 UC 브라우저와 같은 다른 브라우저에서도 웹 페이지가 작동하도록 할 수 있습니다. 둘 다 우리나라에서 3% 및 1.5%의 시장 점유율을 가지고 있기 때문입니다. 그러나 이전 참조에는 이러한 브라우저가 포함되어 있지 않습니다. 이 경우 CSS에 다음과 같이 입력해야 할 수 있습니다.

/*
 * UC Browser-only CSS hacks
 **/
html[data-useragent*='UCBrowser'] #start-button {
    padding-bottom: calc(var(--canvasHeight, 1vh) * 2.0);
}

자바스크립트에서:

var root = document.documentElement;
root.setAttribute('data-useragent', navigator.userAgent);
root.setAttribute('data-platform', navigator.platform );

https://stackoverflow.com/a/29938371/8791891에 대한 크레딧입니다.

각 브라우저가 페이지를 렌더링하는 방식뿐만 아니라 구현 방식도 마찬가지입니다. ended 미디어 이벤트가 실행되지 않고 오디오 재생 지연이 있는 것과 같은 몇 가지 Safari 관련 문제가 있었습니다. 다음과 유사한 다른 오리 타이핑 기술로 브라우저를 식별해야 한다는 생각이 들었습니다.

const isSafari = () => {
    return /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));
}

https://stackoverflow.com/a/9851769/8791891에 대한 크레딧입니다.

특정 장치 식별

다른 경우에는 사용자의 장치 유형에 따라 다른 구현을 원할 수 있습니다. 모바일 장치에서 HTML5 캔버스에 앤티앨리어싱을 활성화하고 싶지 않다고 가정해 보겠습니다. 다음 코드를 사용할 수 있습니다.

const isMobileDevice = () => {
    const agent = navigator.userAgent || navigator.vendor || window.opera;
    return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(agent)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(agent.substr(0,4)));
};

신용 https://stackoverflow.com/a/11381730/8791891

때로는 웹 페이지가 데스크톱과 모바일에서 동일하게 보이지 않을 수 있습니다. 둘 다 Firefox이지만. 이 시점에서 브라우저 감지 해킹과 결합하여 사용 가능한 미디어 기능을 기반으로 두 가지를 구분할 수 있습니다.

@supports selector(:-moz-is-html) { /* for Firefox */
    @media (any-pointer: coarse) { /* for touch input devices */
        #start-button {
            padding-bottom: calc(var(--canvasHeight, 1vh) * 2.0);
        }
    }
}

그러나 이것은 정확하지 않습니다.

https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/에 대한 크레딧입니다.

나중에 봐요!