移动端手机网页适配iPad与折叠屏设备
采用的网页适配方案:移动端页面px布局适配方案(viewport)
产生此问题的原因
由于手机与平板等设备宽高比差异导致页面展示不全或者功能按钮展示在视口之外点击不到。
简单来说就是我们的页面都是瘦长(即高大于宽)的,而折叠屏等设展开后是矮胖的(即宽大于高),二者完全相反页面放进来当然展示不全了。
解决思路
既然是iPad与折叠屏的宽高比跟手机差异过大导致的,那么在iPad与折叠屏上采用差异化的适配方案即可;
当前我们所采用的移动端适配方案是直接用 将视口的宽度设置为固定的设计稿宽度,在同样的宽度下iPad与折叠屏的高度要比手机小很多,所容纳的内容也少,导致某些区域被挤出了视口之外,
所以我们可以通用检测宽高比,在iPad与折叠屏这种设备下不设置视口的宽度而是将页面设置为固定的值即可。
注:这个宽高比是在chrome的移动设备模拟器用下面的代码得到最小页面展示宽高比,css的媒体查询也设置为这个值就行 例如 0.6 就写成 3 / 5
var phoneWidth = parseInt(window.screen.width);
var phoneHeight = parseInt(window.screen.height);
phoneWidth / phoneHeight
代码
<script>//移动端版本兼容var phoneWidth = parseInt(window.screen.width);var phoneHeight = parseInt(window.screen.height);var phoneScale = phoneWidth / 750;var ua = navigator.userAgent;if(phoneWidth / phoneHeight >= 0.6) {document.write('<meta name="viewport" content="width=deviceWidth, user-scalable=no, target-densitydpi=device-dpi">');} else {document.write('<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">');}
</script><style>@media screen and (min-aspect-ratio: 3/5) {body,html {width: 750px;margin: 0 auto;}}
</style>
最终效果
页面展示区域居中,两侧留白保证功能正常,适配效果如下图:

相关文章:
移动端手机网页适配iPad与折叠屏设备
采用的网页适配方案:移动端页面px布局适配方案(viewport) 产生此问题的原因 由于手机与平板等设备宽高比差异导致页面展示不全或者功能按钮展示在视口之外点击不到。 简单来说就是我们的页面都是瘦长(即高大于宽)的,而折叠屏等设…...
深入剖析 Qt QMap:原理、应用与技巧
目录标题 引言:QMap 的重要性与基本概念QMap 简介:基本使用方法(QMap Basics: Concepts and Usage)QMap 迭代器:遍历与操作键值对(QMap Iterators: Traversing and Manipulating Key-Value Pairs࿰…...
SpringBoot使用Hbase
SpringBoot使用Hbase 文章目录 SpringBoot使用Hbase一,引入依赖二,配置文件添加自己的属性三,配置类注入HBASE配置四,配置Hbase连接池五,配置操作服务类 一,引入依赖 <dependency><groupId>org…...
SQL优化总结
SQL优化总结 1. MySQL层优化五个原则2. SQL优化策略2.1 避免不走索引的场景 3. SELECT语句其他优化3.1 避免出现select *3.2 避免出现不确定结果的函数3.3 多表关联查询时,小表在前,大表在后。3.4 使用表的别名3.5 调整Where字句中的连接顺序 附录 1. My…...
【python学习】基础篇-字典的基本操作 获取当前日期时间
1.字典的定义与创建 定义字典时,每个元素都包含两个部分“键”和“值”,在“键”和“值”之间使用冒号(:)分隔,相邻两个元素使用逗号分隔,所有元素放在一个大括号“{}”中。语法格式如下: dictionary (‘key1’:‘value1’, &quo…...
Python FreeCAD.Vector方法代码示例
Python FreeCAD.Vector方法代码示例 本文整理汇总了Python中FreeCAD.Vector方法的典型用法代码示例。如果您正苦于以下问题:Python FreeCAD.Vector方法的具体用法?Python FreeCAD.Vector怎么用?Python FreeCAD.Vector使用的例子?那…...
HDFS 梳理
HDFS客户端 客户端作用 管理文件目录文件系统操作读写 客户端生成 配置项 配置 客户端状态 缓冲相关参数,读写缓冲 失败切换操作 推测执行?? NN引用 NNProxy 客户端关闭 关闭IO流 修改状态 关闭RPC连接 是否有多个RPC连接? HDFS读 打开文件构…...
ChatGPT团队中,3个清华学霸,1个北大学霸,共9位华人
众所周知,美国硅谷其实有着众多的华人,哪怕是芯片领域,华为也有着一席之地,比如AMD 的 CEO 苏姿丰、Nvidia 的 CEO 黄仁勋 都是华人。 还有更多的美国著名的科技企业中,都有着华人的身影,这些华人ÿ…...
通过工具生成指定 类型 大小 文件
今天给大家介绍一个神器 首先 大家在开发过程中或许经常需要涉及到文件上传类的功能 需要测试文件过大 空文件等等清空 不同大小的文件 而这种文件大小是比较不好控制的 但大家可以下载我的资源 文件生成工具(可生成指定大小 类型文件) 下载下来里面就有一个 fileGeneration…...
超外差收音机的制作-电子线路课程设计-实验课
超外差收音机的制作 一、原理部分: 超外差收音机:超外差式收音机是将接收到的不同频率的高频信号全部变成一个固定的中频信号进行放大,因而电路对各种电台信号的放大量基本是相同的,这样可以使中放电路具有优良的频率特性。 超…...
TensorFlow 深度学习实战指南:1~5 全
原文:Hands-on Deep Learning with TensorFlow 协议:CC BY-NC-SA 4.0 译者:飞龙 本文来自【ApacheCN 深度学习 译文集】,采用译后编辑(MTPE)流程来尽可能提升效率。 不要担心自己的形象,只关心如…...
【数据结构】队列的实现
白日去如箭,达者惜今阳。 --朱敦儒目录 🚁前言: 🏝️一.队列的概念及结构 🌻二.队列各种功能的实现 🍍1.队列的初始化 🏝️2.队列…...
【数据库】— 无损连接、Chase算法、保持函数依赖
【数据库】— 无损连接、Chase算法 Chase算法Chase算法举例一种简便方法:分解为两个模式时无损连接和函数依赖的一个简单例子 Chase算法 形式化定义: 构造一个 k k k行 n n n列的表格,每行对应一个模式 R i ( 1 ≤ i ≤ k ) Ri (1≤i ≤ k)…...
用英语翻译中文-汉字英文翻译
中文转英语翻译 作为一款高效、准确的中文转英语翻译软件,我们的产品可以帮助全球用户更好地沟通和合作,实现跨文化交流。 在全球化的今天,中英文翻译已经成为商务、学术、娱乐等各个领域不可或缺的一部分。我们的中文转英语翻译软件是为了…...
瑞吉外卖项目——缓存优化
用户数量多,系统访问量大 频繁访问数据库,系统性能下降,用户体验差 环境搭建 maven坐标 在项目的pom.xml文件中导入spring data redis的maven坐标: <dependency><groupId>org.springframework.boot</groupId><arti…...
从头创建一个新的浏览器,这合理吗?
从头构建一个新浏览器?这如果是不是个天大的“伪需求”,便是一场开发者的噩梦! 要知道,如果没有上百亿的资金和数百名研发工程师的投入,从头开始构建一个新的浏览器引擎,几乎是不可能的。然而SerenityOS系统…...
TypeScript泛型类型和接口
本节课我们来开始了解 TypeScript 中泛型类型的概念和接口使用。 一.泛型类型 1. 前面,我们通过泛型变量的形式来存储调用方的类型从而进行检查; 2. 而泛型也可以作为类型的方式存在,理解这一点,先了解下函数的…...
docker命令
1.运行 docker-compose up 2.查看命令 docker images 3.删掉docker镜像: docker rmi -f [id] docker卸载 1.杀死docker有关的容器: docker kill $(docker ps -a -q) 2.删除所有docker容器:docker rm $(docker ps -a -q) 3.删除所有docker镜像&…...
2023 年 3 月 NFT 月度报告
作者:Danielfootprint.network 数据来源:NFT Monthly Report 三月份的 NFT 市场上出现了两个有趣的趋势。一方面,Polygon 链尽管在二月份有所突破,达到了 NFT 总交易量的 4.2%,但于三月再次跌至 1% 以下,…...
【http】 get方法和Post方法区别;http和https
get方法和Post方法 get方法:通过url传参,回显输入的私密信息,不够私密 Post方法:通过正文传参,不会回显,一般私密性有保证。 一般如果上传的图片,音频比较大,推荐Post方法&#x…...
后进先出(LIFO)详解
LIFO 是 Last In, First Out 的缩写,中文译为后进先出。这是一种数据结构的工作原则,类似于一摞盘子或一叠书本: 最后放进去的元素最先出来 -想象往筒状容器里放盘子: (1)你放进的最后一个盘子(…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...
鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题:docker pull 失败 网络不同,需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX(不访问内存)XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store: 我们在使用异步的时候理应是要使用中间件的,但是configureStore 已经自动集成了 redux-thunk,注意action里面要返回函数 import { configureS…...
【生成模型】视频生成论文调研
工作清单 上游应用方向:控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...
安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖
在Vuzix M400 AR智能眼镜的助力下,卢森堡罗伯特舒曼医院(the Robert Schuman Hospitals, HRS)凭借在无菌制剂生产流程中引入增强现实技术(AR)创新项目,荣获了2024年6月7日由卢森堡医院药剂师协会࿰…...
C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)
名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...
