我一直致力于制作一些强制1000px布局的网站,以提高响应速度.在一个,它可以很好地缩小到~500px,在另一个上它很好地缩放到780px.我的手机是320像素,我的平板电脑大约是1000倍.问题是:
>如果我没有设置视口,两个设备都会将页面渲染为~1000px宽,因此我的所有优秀缩放代码都会被完全忽略,并且手机上的页面非常庞大.
>如果我设置< meta name =“viewport”content =“width = device-width”>,页面呈现完美,但它开始在手机上极度放大(缩放显示320px的布局).
>如果我设置< meta name =“viewport”content =“width = 780”>,它会在手机上完美呈现和缩放,但放大平板电脑(将布局缩放到780px宽,即使我有1000px到与…合作).
我还尝试了一种JavaScript解决方法:
if (screen.width < 780) {
var viewport = document.getElementById("viewport");
viewport.setAttribute("content", "width=780");
}
这适用于Chrome,但不适用于Firefox.我甚至尝试使用CSS转换来扩展Firefox上的整个页面,但是在缩放页面周围留下了一堆空白(这是一个非常糟糕的解决方案).
有没有办法让设备渲染并缩放到它们的宽度低至500px,然后当它们的屏幕尺寸低于它时缩放和渲染为500px?