我尝试了很多不同的东西，例如：
元标签：<meta name="viewport" content="width=device-width, initial-scale=1">
和@-ms-viewport 以及所有这些让我的网站在 ipad mini 和 iphone 上正确扩展
由于某种原因，我可以在 mini 上获得 0.65 比例的元标记视口，但在 iphone 上它真的很大。
希望这里有人可以帮助我完成这项工作！
【问题讨论】：
首先，您似乎输入了错误的 DOCTYPE 声明，您输入了：
<DOCKTYPE html>
应该是：
<!DOCTYPE html>
除此之外，如果您希望根据屏幕尺寸更改初始比例，您可以执行以下操作：
var screenWidth = screen.width;
var screenHeight = screen.height;
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.00');
// ipad/ipad mini/tablet screen sizing
if(screenWidth < 1024) {
viewport.setAttribute('content', 'width=device-width, initial-scale=0.65');
}
// iphone/smartphone sizing
if(screenWidth < 600) {
viewport.setAttribute('content', 'width=device-width, initial-scale=0.5');
}
这将在 ipad 大小的设备上将初始比例设置为 0.65，在 iphone 大小的设备上设置为 0.5。
我建议您查看responsive design 以使该网站在平板电脑/智能手机上更可用（听起来您目前只是在尝试缩小桌面网站，在我看来这并不是一个很好的解决方案)
上面的代码也只在初始页面加载时运行，如果你想在浏览器调整大小时运行它，你可以在 JavaScript 中使用 resize 事件，例如
window.addEventListener('resize', function(event){
// do stuff here
});
您可以创建一个包含我的示例代码的函数，然后在页面加载和页面调整大小时运行它。
【讨论】：