source

iPhone/iPad 브라우저 시뮬레이터?

nicesource 2023. 8. 27. 09:40
반응형

iPhone/iPad 브라우저 시뮬레이터?

Windows 바탕 화면의 iPhone 및 iPad에서 웹 페이지가 어떻게 보이는지 확인해야 합니다.이것이 가능합니까?

빠른 검색 결과 아이폰 테스트 사이트가 몇 개 나왔는데, 제가 원하는 것처럼 보였습니다.하지만, 제가 제 아이폰과 비교했을 때 그것들은 매우 부정확합니다!저는 가능한 한 100% 정확한 것이 필요합니다.

XCode에는 100% 정확한 시뮬레이터가 있습니까?XCode를 실행하려면 Mac이 필요합니다.

Xcode와 함께 제공되는 iPhone/iPad 시뮬레이터에는 Safari가 포함되어 있습니다.시뮬레이터에서 Safari를 실행하면 웹 사이트를 볼 수 있으며 실제 장치와 동일하게 표시됩니다.일반 레이아웃 테스트에 사용할 수 있습니다.하지만 시뮬레이터이기 때문에 모든 기능이 실제 iOS 기기를 사용하는 것과 완전히 같지는 않을 수 있습니다.

웹 사이트를 작성하는 경우 지정된 장치에서 웹 사이트가 올바르게 보이는지 확인해야 하는 경우 실제 장치에서 웹 사이트를 테스트해야 합니다.실제 하드웨어로 테스트하는 것은 비즈니스를 수행하는 대가의 일부입니다.

그리고 예, Xcode를 실행하려면 Mac이 필요합니다.

EDIT 2023: 대부분은 기본적으로 해상도를 테스트하기 위한 것입니다. 일부는 구식입니다. 슬프게도 모바일 브라우저 개발은 데스크톱(특히 Apple)과 함께 옆으로 갔기 때문에 코멘트와 함께 언급한 것처럼 실제 전화기를 "에뮬레이트"할 수 없습니다.

실제 전화기를 에뮬레이트하려면 Windows의 경우 일반적으로 유료/무료(가상/원격 장치를 제공하는 온라인 서비스와 동일)인 데스크톱 앱을 다운로드하는 것이 가장 좋습니다. Mac에서는 Xcode 앱을 사용하십시오(그러나 Mac 사람들이 이 Q/A를 찾고 있는지 의심됩니다).

내가 최근에 발견한 사용하기 쉬운 온라인 프리미엄은 에피타이저입니다.io 네트워크에 따라 화면을 렌더링하는 것처럼 보이지만, 솔직히 나는 그것이 실제 iOS와 동일한 기능과 누락된 기능을 가지고 있는지에 대해서는 별로 파고들지 않았습니다.

나머지의 경우: "테스트를 위한 virtual ios 장치"를 검색합니다.

조언:
출시 전에 항상 실제 장치에서 테스트하세요 :)

아이폰 2대에서 iOS 자체가 다르게 작동하는 경우를 접했습니다.

온라인 시뮬레이터 내가 사용하는 에뮬레이터

recombu - 사라진 것 같습니다(또는 적어도 자산).

브라우저 창을 휴대폰 크기로 조정하는 것과 달리 스마트폰과 동일하게 작동하는 미세 시뮬레이터.사파리에서 주소 표시줄을 편집할 수 없다는 것을 혼동하지 마십시오. 개발자 도구(일반적으로 F12)를 열고 iframe의 소스 URL을 사용자의 것으로 다시 작성하기만 하면 됩니다.
링크: http://recombu.com/mobile/interactive/ios7-demo/

응답 시뮬레이터 - 페이지를 그냥 프레임화하는 것처럼 보입니다.

recombu처럼 작동하는 것처럼 보이지만, 텍스트 입력으로 직접 URL을 열 수 있고 확대/축소할 수 있습니다.
링크: http://www.responsimulator.com/

트랜스모그 - 사라진 것 같습니다.

이것은 웹 페이지를 처리하는 것처럼 보이지만, 여전히 때때로 유용한 오래된 아이폰을 모방합니다.
링크: http://transmog.net/iphone-simulator/mobile-web-browser-emulator.php

검색(스택 오버플로 제외)

이것은 지루하게 들릴 수 있지만 이러한 시뮬레이터/에뮬레이터는 봄과 겨울처럼 왔다 갔다 하므로 항상 새로운 것이 있는지 확인하십시오. 예: 검색 쿼리:

  • "테스트용 virtual ios 디바이스"
  • "온라인 아이폰 에뮬레이터"
  • "virtual ios"

브라우저 장치 모드 - 해상도 테스트만 해당

브라우저의 개발자 도구(Chrome F12)를 열면 장치 모드를 전환하는 옵션이 있을 수 있습니다(Chrome에서는 왼쪽 상단에 있는 작은 스마트폰 아이콘).
chrome device mode icon

이 옵션을 선택하면 GUI가 변경되고 시뮬레이션할 장치를 선택할 수 있는 옵션이 제공됩니다(Chrome에서는 장치를 상단에 있음 - "장치" 선택). 장치를 선택한 후에는 시뮬레이터의 정확성을 보장하기 위해 페이지를 새로 고치는 것이 좋습니다.
chrome device mode - device select option

이제 크롬과 파이어폭스 모두 에뮬레이터가 내장되어 있습니다.완벽하지는 않지만 실제 장치에서 테스트하기 전에 거의 모든 방법을 사용할 수 있을 정도로 충분합니다.가장 좋은 점은 브라우저의 개발자 도구(크롬, 파이어폭스)를 좋아한다면 에뮬레이션하면서 사용할 수 있다는 것입니다.

에뮬레이터를 가져오려면: [Ctrl+Shift+M]을(를) 실행하고 에뮬레이터할 디바이스를 선택합니다.페이지 로드 시 실행되는 스크립트에 따라 달라지는 항목이 있는 경우에는 페이지를 새로 고쳐야 할 수 있습니다.

Google Chrome Emulation mode

Internet Explorer(인터넷 익스플로러)에는 장치 에뮬레이션 모드도 있습니다.F12를 클릭한 다음 Ctrl+8을 클릭합니다.Chrome Mobile Device 에뮬레이션만큼 간단하지는 않지만 지리 위치를 시뮬레이션할 수 있습니다.

Internet Explorer Emulation mode

현재로서는 최고의 에뮬레이터는 https://app.crossbrowsertesting.com 이라고 생각합니다.

실제 크기와 가상 키보드(가장 중요한 것), 확대/축소 이벤트 등이 있습니다.

또한 https://appetize.io/demo 도 같은 것이 있지만 시간 제한이 있습니다.

당신은 Xcode의 시뮬레이터에서 사파리를 실행할 수 있고 그것은 아이패드와 아이폰을 정확하게 모방해야 합니다.시장에서 좋은 평가를 받은 또 다른 것은 크롬용 리플입니다.

실제 장치에서 테스트하는 것을 대체할 좋은 방법은 없습니다.

실제 장치는 디스플레이 밀도가 더 높으며, 이는 픽셀이 더 작다는 것을 의미합니다.실제 장치에서 테스트하지 않으면 너무 작아서 읽을 수 없는 텍스트나 버튼이 너무 작아서 누를 수 없다는 사실을 모를 수 있습니다.

당신은 마우스가 아닌 손가락으로 실제 기기를 사용합니다.이것은 탭의 정확도가 훨씬 낮고 탭하고 있는 것이 손가락에 의해 가려진다는 것을 의미합니다.실제 장치에서 테스트하지 않으면 사용성 문제를 설계에 도입했다는 사실을 깨닫지 못할 수 있습니다.

XCode에는 iPad와 iPhone용 시뮬레이터가 함께 제공됩니다.

OS X에서 Safari를 사용하여 iOS 장치의 웹 사이트를 디버그할 수도 있습니다.

Chrome에서 리플 에뮬레이터를 사용할 수 있습니다.

나는 멋진 무료 앱인 모빌라이저를 사용해 왔습니다.

현재 아이폰4, 아이폰5, 삼성 갤럭시S3, 노키아 루미아, 팜 프리, 블랙베리 스톰, HTC 에보에 대한 기본 시뮬레이션이 있습니다.간단하면서도 효과적입니다.

저는 아이폰 장치 유형이 있는 모바일 브라우저 에뮬레이터 크롬 플러그인을 사용합니다.실제로 사용자 에이전트 및 기반 응답 페이지가 렌더링되는 장치의 크기를 사용합니다.

언급URL : https://stackoverflow.com/questions/15506708/iphone-ipad-browser-simulator

반응형