모바일 장치에서 확인란을 볼 수 없음

Uni 지정을 위해 웹 사이트에서 작업 중이며 이상한 모바일 문제가 있습니다. 체크 된 기능으로 모바일에서 메뉴를 숨기거나 볼 수있게하는 체크 박스를 만들었습니다. Chrome 또는 Firefox에서 모바일 브라우저를 시뮬레이트하거나 Resizer를 사용하여 내 컴퓨터에서 정상적으로 작동합니다.모바일 장치에서 확인란을 볼 수 없음

모바일 (Android)에서 볼 때 확인란이 보이지 않습니다. 화면의 오른쪽 부분을 클릭하면 메뉴가 나타나지만 내 타블렛에서도 똑같은 것을 발견했습니다. 모바일 및 태블릿 모두 모바일 용 Chrome을 실행 중이지만 Opera Mini에서도 테스트 해 보았지만 동일한 문제가 있습니다. PC에서는 정상적으로 실행되지만 모바일에서는 볼 수 없습니다. 여기

내 웹 사이트입니다 : http://wonx.dk/pwdh/

그리고 여기에 관련 HTML과 CSS입니다 :

HTML :

이

<label for="menuon">&#x2630; &#x25be;</label> 
<input type="checkbox" id="menuon">

CSS는 :

label { 
    font-size:36px; 
} 

label:hover { 
    color:#F03B4E; 
} 


input[type=checkbox] { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
} 

/* Checkbox Default State (if deleted menu is always visable) */ 
nav { 
    display:none; 
} 

/* When clicked/Toggled State */ 
input[type=checkbox]:checked ~ nav { 
    display:block; 
}

출처

2014-09-28 Wonx2150

검사가있는 style.css 라인 (106) 입력 [유형 = 체크 박스]에서 스타일 { 위치 : 절대; 상단 : -9999px; 왼쪽 : -9999px; } 버튼을 해당 위치에서 –

으로 이동하면 테스트중인 휴대 전화/태블릿 유형 (ios/android)은 무엇입니까? Chrome과 Safari를 사용하는 iOS8의 iPhone 4S에서 메뉴를 잘 표시 할 수 있습니다. – webeno

예, 안드로이드에만 문제가있는 것 같습니다 ... – webeno

문제는 ☰을 함께 및 ▾ - 작동하지 않습니다. 안드로이드에.

테스트를 위해 실제 단어로 대체하려고 : 여기

<label for="menuon">stripes arrow</label>

는 데모입니다 : http://jsfiddle.net/sc0rv3na/10/

는 예를 들어 Font Awesome 대신 이미지, 특수 글꼴을 사용하십시오. http://jsfiddle.net/sc0rv3na/14/

편집 : 여기

은 글꼴 굉장 구현 그 질문은 윈도우 전화에 대해이지만, 기본적으로도이 질문에 대한 답 : https://stackoverflow.com/a/21997373/2037924

유니 코드 문자가 특정 글꼴에 속하는처럼 Arial Unicode MS 및 모든 글꼴이 다양한 유니 코드 문자를 지원하는 것은 아닙니다.

특수 유니 코드 문자가 표시되도록하려면 플랫폼의 글꼴을 변경해야합니다.

편집 # 2 : 여기에 귀하의 사이트에 모바일 메뉴 아이콘을 추가 할 수있는 몇 가지 방법은 다음과 같습니다 http://css-tricks.com/three-line-menu-navicon/

출처

2014-09-28 11:07:52 webeno

모바일 장치에서 확인란을 볼 수 없음

답변

관련 문제