html - How to scale a fixed-width website to an iPad viewport -
html - How to scale a fixed-width website to an iPad viewport -
i need able fit 2560px wide website ipad's viewport. have
@viewport { width: device-width; max-zoom: .15; orientation: landscape; } @-ms-viewport { width: device-width; max-zoom: .15; orientation: landscape; } @-o-viewport { width: device-width; max-zoom: .15; orientation: landscape; }
and scales viewport of ipad, have scroll horizontally see rest of page.
all need scale website within of viewport don't have scroll see rest of page. i'm okay there beingness space leftover in viewport, can't have overextending viewport.
does know how can scale 2560px 1440px website fit in ipad's viewport? website's dimensions set fit 2560px 1440px monitor used tradeshow kiosk.
thanks help in advance!
edit:
i've updated css @viewport to:
@viewport { width: 2560px; height: 1440px; zoom: .05; orientation: landscape; } @-ms-viewport { width: 2560px; height: 1440px; zoom: .05; orientation: landscape; } @-o-viewport { width: 2560px; height: 1440px; zoom: .05; orientation: landscape; } @-webkit-viewport { width: 2560px; height: 1440px; zoom: .05; orientation: landscape; } @-moz-viewport { width: 2560px; height: 1440px; zoom: .05; orientation: landscape; }
the problem current configuration have 50-100px of page runover in viewport. so, have scroll right view rest of webpage. able fit entire webpage viewport, if there's space between viewport , webpage.
i can't modify width it's absolute positioning.
update:
i found solution problem. apparently ipad not taking @viewport values, downloaded x-code , tested tags. other bit of spacing on bottom of webpage (to preserve aspect ratio of 4:3 on ipad), webpage fits nicely in ipad's viewport.
<meta name="viewport" content="width=2560, height=1440, initial-scale=.40, user-scalable=no">
you need set meta viewport size want eg below:
<meta name="viewport" content="width=2560,height=1440, initial-scale=1">
but google has said fixed viewport bad method , should utilize 'device-width' create website responsive.
information web master tools update
html css ipad viewport
Comments
Post a Comment