"데스크탑 Safari"와의 알려진 "iPad의 Safari"차이점 목록
최근에 Windows / Mac 데스크톱 브라우저에서 웹 응용 프로그램을 테스트 한 다음 iPad에서 예상하지 못한 Safari의 다양한 차이점을 발견했습니다. 버전 번호가 동일하더라도.
개발자 참조로 사용할 수 있도록 이러한 차이점 목록을 작성하고 싶습니다.
예 : iPad의 Safari
- iPad Safari는 선택 목록 / 옵션 스타일을 완벽하게 제어합니다.
- 입력 요소가 포커스를 받으면 iPad에서 화면 키보드가 열리므로 인라인 부동 캘린더 위젯 (등)이 예상대로 작동하지 않거나 변경해야 할 수 있습니다.
- iPad Safari는
position:fixed데스크톱 Safari <iOS 5와 같은 기능을 지원하지 않습니다. - iPad Safari (iPhone / iPodTouch Safari와 유사)는 자동으로 10 자리 숫자를 하이퍼 링크하여 전화 번호 / 연락처 옵션을 제공합니다.
- iPad Safari
prompt('long message...','default');는 메시지의 한 줄만 표시합니다 (메시지 스크롤을 제공하지만
나는 다른 사람들로부터 특정 JavaScript가 작동하지 않는다는 등의 말을 들었지만 아직 완전히 테스트하지 않았으므로 발견했을 수있는 발견에 감사 할 것입니다.
당신을위한 몇 가지 더 :
- 플래시 없음
- 형편없는 iFrame 지원 (페이스 북 등은 iPad 용 맞춤 구현이 필요함)
- 이상한 캐싱 제한
- HTML textAreas에는 스크롤 막대가 없습니다 (물론 놀랍도록 직관적 인 두 손가락으로 스 와이프해야 함)
일반적으로. 축소 된 데스크톱이 아닌 확장 된 iPhone처럼 취급하십시오.
이것이 유용 할 것이라고 생각 했습니다. iPad 용 웹 콘텐츠를 준비하는 Apple의 가이드
방금 위치에 잡혔습니다.
iPad의 Safari에는 iPhone에서와 동일한 버튼 너비 / 패딩 문제가 있습니다.
iPhone <버튼> 패딩을 변경할 수 없습니까? 이 문제와 텍스트가있는 버튼의 패딩을 제거하는 솔루션에 대해 설명하지만 버튼이 패딩 자체보다 더 좁게하려면 (예 : 작은 아이콘 만있는 버튼의 경우) 도움이되지 않습니다. 이렇게하려면 정의 된 너비와 오버플로가있는 외부 요소로 버튼을 둘러싸 야했습니다. 다음과 같이 숨김 :
<span style="border: solid 1px blue; display: block; width: 16px; overflow: hidden">
<button style="-webkit-appearance: none; border-width: 0"> </button>
</span>
(파란색 테두리는 버튼의 위치를 표시하는 것이며 해킹에 중요하지 않습니다)
jQuery의 offset ()이 작동하지 않습니다 : http://bugs.jquery.com/ticket/6446
또한 iPad Safari에는 요소에 문제 overflow:auto;가 있으므로 스크롤바를 표시해야하는 것 같습니다 ( div 및 iframe의 테스트 페이지 ).
iPad Safari는 드물게 배경 이미지를 처리하는 데 문제가있는 것으로 보이며 아래에있는 콘텐츠의 이상한 선이 표시됩니다.
(아직) 구글에는 이것에 대해 많은 것이 없습니다.
iPad 브라우저는 파일 업로드를 지원하지 않습니다 (iPad에는 표준 파일 브라우저가 없으므로 지원하더라도 쓸모가 없습니다). 파일 선택 버튼이 회색으로 표시된 파일 필드가 나타납니다.
TextAea에서 스크롤바를 지원하지 않는 것 외에도 javascript를 사용하여 TextArea의 텍스트를 자동으로 선택할 수있는 것 같습니다. 이 코드는 커서를 TextArea의 텍스트 끝으로 만 이동합니다.
<div>
<textarea id="text-embed-code" autocapitalize="off" multiline="">
There is a fox running after chrome.
</textarea>
<button onclick="testSelectText(event);">select text</button>
</div>
<script>
function testSelectText(e) {
var box = document.getElementById("text-embed-code");
box.select();
e.preventDefault();
return false;
}
</script>
iPad Safari에는 배경 이미지와 배경색이 모두있는 CSS 요소가 배경색에 약간의 테두리가있는 렌더링되는 버그가있는 것 같습니다. 렌더링 된 요소의 가장자리까지 배경 이미지로 채워야합니다.
Ipad에서 보려고 할 때 내 사이트에 동일한 버그가 있습니다. HTML 구조는 다음과 같습니다.
<div class="main"> <!-- background-color: white -->
<div class="left"></div> <!-- background-image: url(some_transparent_png) -->
<div class="content">...</div>
<div class="right"></div> <!-- background-image: url(some_transparent_png) -->
</div>
왼쪽 레이어는 배경 이미지를 사용하는 반면 메인 레이어는 배경색 만 사용합니다. Ipad보기에는 왼쪽 및 오른쪽 레이어의 가장자리에 약간의 테두리가 표시됩니다.
내가 추가 할 때
-webkit-background-size: 100% 100%;
왼쪽 및 오른쪽 레이어로 이동하면 테두리가 사라집니다.
이제 iOS에서 선택 목록의 스타일을 다음으로 재설정하여 제어 할 수 있습니다. -webkit-appearance: none;
이 규칙은 iOS 기기의 Safari에서 애니메이션 깜박임을 수정합니다.
body {-webkit-transform:translate3d(0,0,0);}
iPad Safari에는 배경 이미지와 배경색이 모두있는 CSS 요소가 배경색에 약간의 테두리가있는 렌더링되는 버그가있는 것 같습니다. 렌더링 된 요소의 가장자리까지 배경 이미지로 채워야합니다.
24 bit transparent PNGS ABOVE A CERTAIN FILE SIZE don't render on the iPad2.
I can however get 8 bit ones of the same dimensions to render.
I haven't found out what this maximum file size is in order to get them to render.
I'm currently working on a small responsive web-app which makes heavy use of the iframe youtube api. Apparently the ipad version of safari doesn't support a few html5 methods which I use heavily in this project.
One of them is window.postMessage, which is a way of interacting with scripts on other pages, for example the a script that is used "within" that iframe. Autoplaying videos also doesn't work.
프레임 문제. iPad Safari는 스크롤바를 숨기고 콘텐츠 크기에 맞게 프레임을 확장합니다. 프레임 태그를 변경 포함하도록 scrolling="yes"하고 noresize="noresize"나타난다는 아무것도 할 수 있습니다. 일부 사이트는 모든 것, 심지어 Dreamcast 브라우저에서도 괜찮아 보이지만 iPad에서는 그렇지 않습니다. 일반적인 프레임 설정 (열 및 행 등) 대신 테이블 및 iframe을 사용하여 문제를 해결할 수 있습니다.
또한 contenteditable모바일 사파리에서는 지원되지 않으므로 일반을 사용하는 textarea것이 더 좋습니다. Apple 개발자 문서
position: fixed;
iOS 4에서는 작동하지 않지만 iOS 5에서는 작동합니다.
'Program Tip' 카테고리의 다른 글
| 데이터베이스에 디렉토리 / 계층 구조 / 트리 구조를 저장하는 방법은 무엇입니까? (0) | 2020.12.27 |
|---|---|
| 오른쪽 하단 div 주위에 텍스트를 줄 바꿈하려면 어떻게해야합니까? (0) | 2020.12.27 |
| symfony2- "dev"에서 "prod"로 전환하는 방법은 무엇입니까? (0) | 2020.12.27 |
| 캐시 라인 크기에 언제 어떻게 정렬해야합니까? (0) | 2020.12.27 |
| Android에서 Docker 실행 (0) | 2020.12.27 |