실제 웹 페이지에서 PhantomJS 스크린 샷 측정 기준을 일치시키는 방법은 무엇입니까?

Question

PhantomJS를 사용하여 광산 웹 페이지에서 스크린 샷을 찍고 있습니다. 코드는 간단

var page = require('webpage').create(); 
page.open('Target_Zone_Selection.html', function() { 
    page.viewportSize = {width: 1024, height: 800}; 
    page.render('test.png'); 
    phantom.exit(); 
}); 

모든 것이 잘 작동하지만, 내가 그때하고 싶은 (정확한 뷰포트 크기의 브라우저에서 볼 때) 실제 웹 페이지와 스크린 샷을 해당하는 것입니다. 내 궁극적 인 목표는 마우스 위치를 얻고 스크린 샷에서이 위치를 일치시키는 것입니다.

그리고 문제가 있습니다. 웹 페이지 크기가 PhantomJS의 렌더링과 다릅니다. 여러 가지 해결책을 시도했습니다. DOM을 통과하면서 각 오프셋 위치를 사용하여 스크린 샷의 크기를 찾았지만 항상 문제가 있습니다. 이 방법은 너비에서는 작동하지만 높이는 작동하지 않습니다.

누군가 웹 페이지 및 스크린 샷을 만드는 방법을 설명 할 수 있습니까? 고마워요!

업데이트 : 내 웹 페이지에 캔버스, 단추, 텍스트 양식 및 일부 html이 있습니다. PhantomJS로 렌더링 된 동일한 크기를 제공하지 않는 유일한 요소는 버튼입니다 ... 그리고 버튼의 렌더링은 브라우저간에 다릅니다 ...

버튼의 렌더링 된 크기를 예측하려면 어떤 제안을 원하십니까?

Answer 1

모바일 장치 용 뷰포트 태그에 대해 이야기하고 있습니까? PhantomJS와 같은 "데스크톱"브라우저는 뷰포트를 지원하지 않습니다. 모바일 브라우저를 지원하는 도구 또는 서비스 (예 : https://browshot.com/)를보아야합니다.