iOS 键盘难题与可见视口（VisualViewport）API

最新推荐文章于 2024-05-16 09:41:54 发布
最新推荐文章于 2024-05-16 09:41:54 发布
阅读量520 收藏
点赞数
分类专栏： 优化方案 方法 文章标签： ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42232156/article/details/121079144
版权

Web 开发者与 iOS 长达四年的较量，终于在 iOS 13 发布这一刻落下帷幕。

iOS 8.2 和它的键盘难题

2015 年三月，iOS 发布了 8.2 版本。这在当时看来也许只是这个现代的操作系统的一次小更新，但在 Web 开发者眼里，有些微妙的问题产生了。这是一件在 Android 世界里想象不到的麻烦事儿。

在此之前 Web 开发者都非常清楚，在 window 全局对象上的 innerWidth/innerHeight 表示浏览器窗口中可以看到页面的区域的尺寸，而 outerWidth/outerHeight 表示浏览器窗口整体的尺寸。可以看到页面的区域又被称为「视口」（Viewport），在 CSS 的世界里，任何 position: fixed 的元素都会脱离文档流并以视口为基准进行定位，以便在页面滚动时让这些元素相对于窗口固定，例如桌面 Web 设计中常见的头部、侧边栏、「返回顶部」按钮等等。

可是从 iOS 8.2 开始，这些概念开始不那么灵了。

难题一：不可靠的 fixed

image

了解本专栏 订阅专栏 解锁全文 超级会员免费看
短暂又灿烂的
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
layout viewport、visual viewport 和 ideal viewport 的区别？
liuhao9999的博客
03-23 374
相关知识点： 如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定 默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。 ppk把这个浏览器默认的viewport叫做layout viewport。 layout viewport的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表浏览器可视区域的大小，ppk把 这个viewport.
轻松理解iOS 11中webview的视口
01-04
此文章可帮助您了解iOS 11中的Webview视口。 注意：现有应用程序将继续工作，因为它们始终可以对其视口行为进行更改。这只会影响使用Xcode 9和iOS 11的目标编译的应用程序。 要了解这些变化，我们需要看看它的历史。...
HTML中viewport（APICloud-viewport）
qq_37899792的博客
03-25 599
viewport viewport 是由 Apple 公司为了让更多桌面网站可以在 safari 浏览器内正常显示而推出的解决方案，后被各大浏览器支持。 使用 viewport 可以自定义当前页面在浏览器中以何种分辨率显示。 而 APICloud 应用由于在引擎层做了多屏幕适配工作，如手动指定 viewport 为某个具体的数值时，可能会造成我们的应用页面显示变形。 在 APICloud ...
推荐开源项目：PostCSS 100vh Fix —— 解决移动设备视口高度问题的纯CSS解决方案
最新发布
gitblog_00077的博客
05-16 269
推荐开源项目：PostCSS 100vh Fix —— 解决移动设备视口高度问题的纯CSS解决方案 项目地址:https://gitcode.com/postcss/postcss-100vh-fix 在前端开发中，我们经常使用 100vh 来实现页面全屏布局，但苹果设备上的Safari浏览器和Chrome的部分场景下会出现一些小插曲。为了解决这个问题，一款名为 PostCSS 100vh Fix...
一对一源码，iOS 键盘高度及获取键盘高度的方法
云豹网络科技
02-07 540
一对一源码，iOS 键盘高度及获取键盘高度的方法 一、获取键盘高度的方法： - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. //增加监听，当键盘出现或改变时接收消息 //加一个textField，以便可以弹出键盘 UITextField* textField = [[UITextField alloc]initWithF
viewport、布局视口、视觉视口、理想视口 深入理解
codest的专栏
07-27 547
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视
vue移动端适配
weixin_44705688的博客
01-13 1011
vue移动端开发总结 移动端适配 本文来自于掘金大神分享，用于移动端学习使用 相对于PC端来说，移动端设备分辨率百花齐放，千奇百怪，对于每一个开发者来说，移动端适配是我们进行移动端开发第一个需要面对的问题。 在移动端我们经常可以在head标签中看到这段代码： <meta name='viewport' content='width=device-width,initial-scale=1,u...
viewport 视口与窗口 逻辑坐标 设备坐标
02-18
viewport 视口 窗口 GDI 坐标 映射方式定义了Windows如何将GDI函数中指定的逻辑坐标映射为设备坐标。 Windows有关映射模式的一些术语：逻辑坐标所在的坐标系称为"窗口"，将设备坐标所在的坐标系称为"视口"。
详解VC++中的窗口与视口
11-12
"VC++中的窗口与视口" VC++中的窗口（Window）和视口（Viewport）是计算机绘图的基本概念，理解它们对于学习VC++和GDI函数非常重要。 窗口（Window） 窗口是基于逻辑坐标系的虚拟窗口，用于绘图和数据显示。在...
react-in-viewport:检测React组件是否在视口中
04-28
在视口中React 使用来检测组件是否在视口中的库npm install --save react-in-viewport yarn add react-in-viewport 例子为什么一个常见的用例是在组件位于视口中时加载图像（ ）。 传统上，我们需要监视滚动位置并...
viewport视口的概念
csx blog
12-03 596
概念详见 MDN，我摘出来对比了下，如下图：总结：只要记住，在手机浏览器中输入内容时弹出键盘，这是Visual Viewport高度变小了，而Layout viewport布局视口没变，概念就很容易理解了。用例子来理解概念。参考：https://developer.mozilla.org/en-US/docs/Glossary/Viewporthttps://developer.mozilla.org/en-US/docs/Glossary/Visual_Viewporthttps://developer.
移动端适配之viewport
luemeon的博客
04-19 535
此Hook利用了的resize事件，处理移动设备上因等导致视口变化API 提供了有关视觉视口（visual viewport）的信息，即用户实际看到的部分，这部分可能会因为UI元素（如地址栏和键盘）的显隐而改变。
微软资深专家论如何用Visual Studio开发iOS、Android应用
QQ54332057的专栏
11-09 852
摘要：TUP第30期活动于11月7日成功举办。本活动邀请三位微软资深专家从不同方面分析了跨平台应用开发中的难点与痛点，并分享了微软在跨平台研发方面的科研成果，同时在现场提前披露了Visual Studio 2013的诸多新特性。 2013年11月7日，CSDN联合微软举办了“移动跨平台开发一步到位”为主题的TUP第30期活动。本活动邀请到了微软大中华区开发工具高级产品经理胡德民、微软（中国）有限
viewport 深入理解
juruiyuan111的专栏
11-23 202
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewport的概念通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大
layoutviewport、visualviewport 和 idealviewport 的区别
ApologizeError的博客
05-12 537
相关知识点： 如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定 默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。 ppk把这个浏览器默认的viewport叫做layoutviewport。 layoutviewport的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表浏览器可视区域的大小，ppk把 这个viewport叫做vi
react中解决h5键盘弹起无法顶起屏幕问题
wjt_958958_的博客
12-09 449
【代码】react中解决h5键盘弹起无法顶起屏幕问题。
CSS - 移动端布局（一）关键的前置知识
伏城之外的博客
08-17 1415
物理像素、物理分辨率、CSS像素、逻辑分辨率、设备像素比DPR、屏幕尺寸、像素密度PPI、DPI、视网膜显示屏、二倍图、三倍图、视口、布局视口、视觉视口、移动浏览器的布局视口、980、移动浏览器对PC网页的缩放、meta viewport、initial-scale、width、理想视口、device-width...........................
移动端的视口viewport
chenrongwei92的博客
10-08 958
移动端的视口viewport涉及三个视口: 布局视口（Layout Viewport） 视觉视口（Visual Viewport） 理想视口（Ideal Viewport） 布局视口（Layout Viewport）: 移动设备上的浏览器认为自己必须能让所有的网站都正常显示，即使那些不是为移动设备设计的网站(为PC端设计的网站)。 由于移动设备的屏幕比PC的宽小很多，如果以浏览器的可视区域作为viewport， 则那些为PC端设计的网站放到移动设备上显示时，必然会因为移动设备的viewport..
CAD中布局的用法【精选文档】.doc
12-14
了解和熟练掌握布局和视口的概念与操作，是提升CAD绘图效率的关键。通过合理布局，你可以创建专业且整洁的工程图纸，便于审查、交流和打印。这需要一定的时间来适应新的工作流程，但一旦掌握，将会极大地提高你的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

短暂又灿烂的

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值