요즘 나오는 대부분의 워드프레스는 반응형(Responsive)으로 나오기 때문에 모바일 기기에서는 자동으로 모바일 버전이 표시됩니다. 모바일 버전에서 손가락을 벌리거나 오므리면 화면이 확대/축소되지 않도록 설정하려면 다음 코드를 header.php 파일에 추가하도록 합니다.
인터넷 익스플로러(IE) 10 버전에서 제대로 작동하지 않는 경우-ms-content-zooming: none | zoom구문을 사용합니다(여기참고). 가령 다음과 같은 CSS 코드를 스타일시트 파일에 추가하도록 합니다.
마우스가 존재하진 않지만, 내부적으로는 터치 이벤트 뿐만 아니라 마우스 이벤트도 발생하는 것을 볼 수 있다. 중요한 건,mouseover 시점에서 화면이 변경될 경우, 이벤트가 멈춘다는 것이다. (이벤트 발생 프로세스의 자세한 내용은Safari Developer Library의 Handling Events 챕터를 참고.)
위 문서에는 '화면이 변경(if the contents of page changes)'되는 것에 대한 명확한 정의는 없다. 테스트 해본 결과, '화면이 변경'된다는 것은 정확하게는'레이아웃이 변경(reflow)'되는 것에 가까운 것 같다. 백그라운드가 변경된다거나, 레이아웃에 영향을 끼치지 않는 정도의 margin/padding이 변경되는 경우(repaint)에는 이벤트가 종료되지 않는다.
따라서, 두 번 클릭해야 실행되는 문제를 해결하기 위해서는, 터치 인터페이스에서는 mouseover 이벤트가 발생했을 때 화면 변경이 되지 않도록 해야 한다.
마우스를 시뮬레이션하기 위해 Webkit 모바일과 같은 브라우저는 사용자가 터치 스크린 (예 : iPad)에서 손가락을 뗀 경우 다음 이벤트를 발생시킵니다 (출처 : html5rocks.com의Touch And Mouse).
touchstart
touchmove
touchend
300ms 지연, 브라우저는 이것이 두 번 탭이 아니라 한 번 탭인지 확인합니다.
mouseover
mouseenter
참고하십시오 경우mouseover,mouseenter또는mousemove이벤트 페이지 내용을 변경, 다음 이벤트가 실행되지 않습니다.
mousemove
mousedown
mouseup
click
단순히 웹 브라우저에 마우스 이벤트를 건너 뛰도록 지시하는 것은 불가능 해 보입니다.
더 나쁜 것은 마우스 오버 이벤트가 페이지 콘텐츠를 변경하는 경우Safari 웹 콘텐츠 가이드-이벤트 처리, 특히One-Finger 이벤트의그림 6.4에 설명 된대로 클릭 이벤트가 발생하지 않는다는 것 입니다. 정확히 "컨텐츠 변경"은 브라우저와 버전에 따라 다릅니다. iOS 7.0의 경우 배경색 변경은 콘텐츠 변경이 아닙니다 (또는 더 이상 변경되지 않습니까?).
<form>
<fieldset>
<legend>
<h3>What type of accessibilty issues do you see most often?</h3>
</legend>
<div class="wrapper">
<input id="a11y-issue-1" name="a11y-issues" type="checkbox" value="no-issues">
<label for="a11y-issue-1">There are no issues.</label>
</div>
<div class="wrapper">
<input id="a11y-issue-2" name="a11y-issues" type="checkbox" value="no-focus-styles">
<label for="a11y-issue-2">Focus styles are not present.</label>
</div>
<div class="wrapper">
<input id="a11y-issue-3" name="a11y-issues" type="checkbox" value="html-markup">
<label for="a11y-issue-3">HTML markup is used in a bizarre way. Also, what happens if the label text is very looooooooong, like this one?</label>
</div>
</fieldset>
</form>
css
html {
box-sizing: border-box;
background: #f2f2f2;
padding: 20px 50px
}
/* Inherit box-sizing to make it easier to change the property
* for components that leverage other behavior.*/
*,
*::before,
*::after {
box-sizing: inherit;
}
/*style form to limit width and highlight the long label*/
form {
margin: 1rem auto;
max-width: 750px;
}
/*style wrapper to give some space*/
.wrapper {
position: relative;
margin-bottom: 1rem;
margin-top: 1rem;
}
/*style label to give some more space*/
.wrapper label {
display: block;
padding: 12px 0 12px 48px;
}
/*style and hide original checkbox*/
.wrapper input {
height: 40px;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 40px;
}
/*position new box*/
.wrapper input + label::before {
border: 2px solid;
content: "";
height: 40px;
left: 0;
position: absolute;
top: 0;
width: 40px;
}
/*create check symbol with pseudo element*/
.wrapper input + label::after {
content: "";
border: 4px solid;
border-left: 0;
border-top: 0;
height: 20px;
left: 14px;
opacity: 0;
position: absolute;
top: 6px;
transform: rotate(45deg);
transition: opacity 0.2s ease-in-out;
width: 12px;
}
/*reveal check for 'on' state*/
.wrapper input:checked + label::after {
opacity: 1;
}
/*focus styles—commented out for the tutorial, but you’ll need to add them for proper use
.wrapper input:focus + label::before {
box-shadow: 0 0 0 3px #ffbf47;
outline: 3px solid transparent;
}*/
<form>
<fieldset>
<legend>
<h3>What type of accessibilty issues do you see most often?</h3>
</legend>
<div class="wrapper">
<input id="a11y-issue-1" name="a11y-issues" type="radio" value="no-issues">
<label for="a11y-issue-1">There are no issues</label>
</div>
<div class="wrapper">
<input id="a11y-issue-2" name="a11y-issues" type="radio" value="no-focus-styles">
<label for="a11y-issue-2">Focus styles are not present</label>
</div>
<div class="wrapper">
<input id="a11y-issue-3" name="a11y-issues" type="radio" value="html-markup">
<label for="a11y-issue-3">HTML markup is used in bizarre way. Also, what happens if the label text is very looooooooong, like this one?</label>
</div>
</fieldset>
</form>
html {
box-sizing: border-box;
background: #f2f2f2;
padding: 20px 50px
}
/* Inherit box-sizing to make it easier to change the property
* for components that leverage other behavior.*/
*,
*::before,
*::after {
box-sizing: inherit;
}
/*style form to limit width and highlight the long label*/
form {
margin: 1rem auto;
max-width: 750px;
}
/*style wrapper to give some space*/
.wrapper {
position: relative;
margin-bottom: 1rem;
margin-top: 1rem;
}
/*style label to give some more space*/
.wrapper label {
display: block;
padding: 12px 0 12px 48px;
}
/*style and hide original checkbox*/
.wrapper input {
height: 40px;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 40px;
}
/*position new box*/
.wrapper input + label::before {
border: 2px solid;
content: "";
height: 40px;
left: 0;
position: absolute;
top: 0;
width: 40px;
border-radius: 50%;
}
/*radio pseudo element styles*/
.wrapper input + label::after {
content: "";
opacity: 0;
border: 10px solid;
border-radius: 50%;
position: absolute;
left: 10px;
top: 10px;
transition: opacity 0.2s ease-in-out;
}
/*reveal check for 'on' state*/
.wrapper input:checked + label::after {
opacity: 1;
}
/*focus styles*/
.wrapper input:focus + label::before {
box-shadow: 0 0 0 3px #ffbf47;
outline: 3px solid transparent; /* For Windows high contrast mode. */
}
