Is there a way to make a 2560px wide website fit perfectly within an iPad's viewport without needing to scroll horizontally? Currently, the @viewport CSS is set as follows:
@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;
}
This configuration scales the website to fit the iPad's viewport but requires horizontal scrolling to see the entire page. I need the website to be scaled inside the viewport with no need for horizontal scrolling, even if there's extra space in the viewport.
Any suggestions on how to scale a 2560px by 1440px website to fit an iPad's viewport? The website was originally designed for a monitor with those dimensions.
Thank you for any assistance!
UPDATE:
I have adjusted the 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 issue now is that there is some overflow beyond the viewport size, requiring right scrolling. I'm unable to adjust the width due to absolute positioning restrictions.
LATEST UPDATE:
A solution has been found by setting the viewport meta tag as follows:
<meta name="viewport" content="width=2560, height=1440, initial-scale=.40, user-scalable=no">