html – iPad缩放以适应在内容最少的网页上不起作用

html – iPad缩放以适应在内容最少的网页上不起作用,第1张

概述考虑以下基本的html代码块: <!doctype html><html><head> <meta charset="utf-8"> <title>iPad test</title> <meta name="viewport" content="width=device-width"> <style> body { 考虑以下基本的HTML代码块:

<!DOCTYPE HTML><HTML><head>    <Meta charset="utf-8">    <Title>iPad test</Title>    <Meta name="vIEwport" content="wIDth=device-wIDth">    <style>        body        {            margin:0;        }        #content        {            margin: 0 auto;            wIDth: 980px;            border:1px solID #c4c4c4;            background-color:#f5f5f5;        }    </style></head><body><div ID="content">    A small amount of content</div></body></HTML>

在iPad上观看时,980px的主要内容区域将不会自动缩放以适应iPad屏幕.但是,如果您使用大量内容替换少量内容,即…足以导致垂直滚动,则页面将在iPad上自动缩放.

有人知道为什么吗?我一直在搜索高低,当页面上的内容很少时,似乎无法找到强制自动缩放的方法.

将视口内容更改为wIDth = 980当然会解决问题,但是我创建了一个响应式网站,因此视口需要是设备宽度.

我正在使用媒体查询来改变智能手机上内容区域的CSS(达到100%宽度),我希望使用iPad的标准桌面版本的iPad.

任何想法将不胜感激.

注意:我在带有视网膜显示器的iPad上进行测试,我不确定旧型号会发生什么.

解决方法 经过一段时间的休息后,我以不同的角度回来了 – 如果将视口宽度设置为特定值可以解决我的iPad问题,为什么不这样做呢.

因此,我的解决方案是将视口宽度默认为设备宽度以处理智能手机设备,然后检测iPad并调整视口宽度:

<Meta name="vIEwport" content="wIDth=device-wIDth"><script type="text/JavaScript">    if(navigator.userAgent.match(/iPad/i)) {        vIEwport = document.querySelector("Meta[name=vIEwport]");        vIEwport.setAttribute('content','wIDth=980');    }</script>

感谢您的建议insertusernamehere

总结

以上是内存溢出为你收集整理的html – iPad缩放以适应在内容最少的网页上不起作用全部内容,希望文章能够帮你解决html – iPad缩放以适应在内容最少的网页上不起作用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1081077.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-27
下一篇 2022-05-27

发表评论

登录后才能评论

评论列表(0条)

保存