地图容器自适应浏览器是什么意思_Web移动端实现自适应缩放界面的方法汇总
前端媛猿
读完需要
5分钟
速读仅需 3 分钟
作者 | 唐宋元明清2188来源 | http://www.cnblogs.com/kybs0/在开发App端的网页时,要适配iphone、ipad、ipod、安卓等各种机型,一般是直接使用em、px转em、界面缩放。本章是通过将界面缩放,等比例显示在各机型上。过程中遇到了些问题和大坑~然后下面是具体的自适应实现方式的尝试~
方案一:设置tranform/scale
首先设置内容固定宽度、自动高度(以下举例)
width: 375px; height: auto;
通过获取窗口的宽度与固定宽度相除,获得缩放比例
const scaleValue=window.innerWidth / 375
在html层,添加一段script:添加一段设置zoom值的函数:
getScript() {
return `
const zoomValue=window.innerWidth / 375;
document.documentElement.style.transform="scale("+zoomValue+")";
document.documentElement.style.transformOrigin="left top";
;
}
注:以上也可以直接写script,我上面返回一段html是因为项目是通过服务端渲染的。样式的设置必须在界面加载之前,否则会因界面显示变更出现闪现问题。因为添加了服务端渲染,所以无法在界面一开始初始时,无法获取window、document等对象。而上面html的注入,对服务端渲染机制的一个黑科技~上面的方案完成后,看看效果。然后坑出来了:
项目设置的absolue元素width 100%失效了 -- 可以设置固定的宽度解决
弹框position=fixed位置飞到天边去了 -- 这个无法规避。
网上找到了一篇文章 CSS3 transform对普通元素的N多渲染影响 ,介绍了transform的一堆坑。我这个项目一些布局需要position=fixed,所以tranform不适合~放弃这个坑的其它介绍可以参考下:
transform限制position:fixed的跟随效果
关于在transform下的子元素设置fixed无效的困惑
总结:
position:fixed不支持,所以想做标题栏置顶,上面方案是无法实现的。
ipad有遗留问题:微信浏览器,横竖屏切换时,有些机型在打开一瞬间,横向拖动有空白问题。这个问题无法处理~
以上方案因为使用了scale,同时窗口的宽高window.innerHeight无法准确获取,需要除以比例,比如: window.innerHeight / (window.innerWidth / 375)
方案二:设置zoom
在上一个方案的基础上,尝试zoom缩放:
getScript() {
return `
const zoomValue=window.innerWidth / 375;
document.documentElement.style.zoom = zoomValue;
;
}
emmm,很简单,调试效果看起来很不错。模拟机上,看起来都正常~但是坑来了:真机有问题,发现在ipad的safari上,页面是放大了,但是字段根本就没变化!原因竟然是:苹果在ipad的网页,改动渲染方面的相关规则。有点坑~https://apple.stackexchange.com/questions/377216/css-zoom-does-not-work-ipad-os-v13-latest-safarihttps://stackoverflow.com/questions/7907760/why-the-font-size-wont-change-with-browser-zoom-in实现没办法,我后面尝试,通过userAgent对ipad机型(ipad、macintosh)特殊处理,直接获取所有包含了文字的div、p、span等元素,放大font-size。发现可以处理,没毛病!但是也有些缺陷,没办法在一开始处理字体,因为元素还没有初始化,而等界面加载后再刷字体大小,界面会闪现一次。
方案三:设置viewport-scare
在html中添加默认viewport:ps:minimal-ui 与本文无关,它可以在safari加载网页时隐藏地址栏与导航栏添加viewport更新:
getScript() {
return `
const zoomValue=window.innerWidth / 375;
var viewport = document.querySelector("meta[name=viewport]");
viewport.content="width=device-width,initial-scale="+zoomValue+", maximum-scale="+zoomValue+", minimum-scale="+zoomValue+",user-scalable=no, minimal-ui"
;
}
运行代码,emmm,有一些小问题。
margin:auto,在某些布局下会让页面偏移 -- 删除就好
设置background-image的区域,背景图片并没有填充满 -- 添加width:100%解决
position:fixed,宽高显示有问题 -- 设置固定宽度,比如375px,固定高度;如果需要全屏,可以使用height: 100vh。
fixed布局建议:以弹框为例添加fixed布局的容器,水平竖直方向靠边距离分别设置一个就行了,left:0,bottom:0。然后添加absolute布局的内容容器.如果需要居中,可以在js中设置bottom=window.innerHeight / 2 - 元素的高度/2总结:
以上方案不支持fixed布局,修改完成后,ipad的水平滚动条依然存在,无法解决
兼容适配
采用第二个zoom缩放方案,同时对ipad机型特殊处理,另外采用scale缩放方案。完整代码如下:1. 初始化适配(支持服务端渲染)html-header添加script
{/* app contentAutoFit */}
自适应可执行代码文本。
//返回自适应html字符串
getZoomScript() {
return `
const zoomValue = window.innerWidth / 375;
const userAgentInfo = window.clientInformation.appVersion;
//如果是ipad
if (userAgentInfo.indexOf("iPad") != -1 || userAgentInfo.indexOf("Macintosh") != -1) {
//内容自适应 - 设置transform-scale。
//fixed布局时需要修改下left/margin-left等,同时窗口的宽高无法准确获取,需要除以比例,详见windowSizeWithScaleHelper
//ipad有遗留问题:微信浏览器加载时,横竖屏切换一瞬间,有空白问题。不过可以忽略~
document.documentElement.style.transform = "scale(" + zoomValue + "," + (zoomValue < 1 ? 1 : zoomValue) + ")";
document.documentElement.style.transformOrigin = "left top";
var html = document.querySelector("html");
html.style.width = '375px';
html.style.overflow = 'hidden';
html.style.overflowY = 'auto';
} else {
//内容自适应 - 设置zoom。通过zoom来缩放界面,在ipad的safari浏览器等会存在字体无法缩放的兼容问题。
document.documentElement.style.zoom = zoomValue;
}
// 内容自适应 - 设置viewport,整体okay。但是ipad的水平滚动条无法解决
// var viewport = document.querySelector("meta[name=viewport]");
// viewport.content = "width=device-width,initial-scale=" + zoomValue + ", maximum-scale=" + zoomValue + ", minimum-scale=" + zoomValue + ",user-scalable=no, minimal-ui"
`;
}
2. 添加加载及界面变更刷新机制
微信浏览器横竖屏切换时,某些机型不会触发窗口大小变更,所以需要额外添加orientationchange监听
加载过程中,微信浏览器切换横竖屏会有显示问题,需要加载完成后适配
componentDidMount() {
//window.onresize = this.adjustContentAutoFit;
//解决微信横竖屏问题
window.addEventListener("orientationchange", this.adjustContentAutoFit);
//解决加载过程中,切换横竖屏,导致界面没有适配的问题
this.adjustContentAutoFit();
}
componentWillUnmount() {
window.removeEventListener("orientationchange", this.adjustContentAutoFit);
}
//监听窗口尺寸变更,刷新自适应
adjustContentAutoFit() {
const zoomValue = window.innerWidth / 375;
const userAgentInfo = window.clientInformation.appVersion;
//如果是ipad
if (userAgentInfo.indexOf("iPad") != -1 || userAgentInfo.indexOf("Macintosh") != -1) {
//内容自适应 - 设置transform-scale。
//fixed布局时需要修改下left/margin-left等,同时窗口的宽高无法准确获取,需要除以比例,详见windowSizeWithScaleHelper
//ipad有遗留问题:微信浏览器,横竖屏切换时,有些机型在打开一瞬间,有空白问题。不过可以忽略~
document.documentElement.style.transform = "scale(" + zoomValue + "," + (zoomValue < 1 ? 1 : zoomValue) + ")";
document.documentElement.style.transformOrigin = "left top";
var html = document.querySelector("html") as HTMLElement;
html.style.width = '375px';
html.style.overflow = 'hidden';
html.style.overflowY = 'auto';
} else {
// 内容自适应 - 设置zoom。通过zoom来缩放界面,在ipad的safari浏览器等会存在字体无法缩放的兼容问题。
document.documentElement.style.zoom = zoomValue;
}
// 内容自适应 - 设置viewport,整体okay。但是ipad的水平滚动条无法解决
// var viewport = document.querySelector("meta[name=viewport]");
// viewport.content = "width=device-width,initial-scale=" + zoomValue + ", maximum-scale=" + zoomValue + ", minimum-scale=" + zoomValue + ",user-scalable=no, minimal-ui"
}
此方案的一些小遗留问题:
ipad不支持position:fixed,所以无法实现标题栏置顶等功能
微信浏览器,横竖屏切换时,有些机型在打开一瞬间,有空白问题
参考:
IOS环境下固定定位position:fixed带来的问题与解决方案
小技巧css解决移动端ios不兼容position:fixed属性,无需插件
踩坑路上——IOS Safari浏览器下固定定位position:fixed带来的问题与解决方案
iphone safari不支持position fixed的解决办法
orientationchange事件、监测微信移动端横竖屏
本文完~文章精选1、vue修饰符--可能是东半球最详细的文档(滑稽)2、JavaScript 已被淘汰?3、Angular 发布首个正式的路线图
更多精彩等待你的发现点分享点点赞点在看
地图容器自适应浏览器是什么意思_Web移动端实现自适应缩放界面的方法汇总相关推荐
- antd option宽度自适应_Web移动端实现自适应缩放界面的方法汇总
作者 | 唐宋元明清2188来源 | http://www.cnblogs.com/kybs0/在开发App端的网页时,要适配iphone.ipad.ipod.安卓等各种机型,一般是直接使用em.px ...
- 自适应宽_移动端实现自适应缩放界面的方法汇总
作者 | 唐宋元明清2188来源 | http://www.cnblogs.com/kybs0/在开发App端的网页时,要适配iphone.ipad.ipod.安卓等各种机型,一般是直接使用em.px ...
- 【Web技术】706- 移动端实现自适应缩放界面的方法汇总
作者 | 唐宋元明清2188 来源 | http://www.cnblogs.com/kybs0/ 在开发App端的网页时,要适配iphone.ipad.ipod.安卓等各种机型,一般是直接使用em. ...
- 让div元素自适应浏览器屏幕高度
很多时候都需要让div或者其他标签元素自适应浏览器屏幕高度,比如左侧菜单高度自适应 所以可以用window.innerHeight然后绑定到元素上面 如图,我用vue,jq的也差不多.反正只要获取到w ...
- CSS实现自适应浏览器宽度的正方形
2019独角兽企业重金招聘Python工程师标准>>> CSS实现自适应浏览器宽度的正方形有以下三种方法: 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分 ...
- 基于高德地图JsAPI进行浏览器精确定位,实现手机端考勤打卡功能
前言: 由于项目需求需要在项目中实现手机端(基于网页)考勤打卡功能,最初考虑使用H5自身定位功能,但尝试过后,效果很不稳定.然后尝试使用百度地图JsAPI,百度家的稳定倒是很稳定,没想到的是定位位置和 ...
- 通过高德地图API实现浏览器定位[以及提高定位精度、获取详细位置信息]
目录 一.前言: 二.正文: 1.注册高德地图开发者.创建应用 2.借助官方的示例开发 3.对官方的开发示例进行修改 4.获取详细位置信息 5.详细代码 三.结尾:小周接触编程时间不长,刚起步,有更好 ...
- 强迫症晚期患者:纯CSS实现div高度自适应浏览器。
我记得在学了网页自适应的内容后,每次写网页,力求宽高自适应.最后还是有一些困惑:写一个div给样式.(给定背景色和字体色是为了便于我们观察.) width:100%;background:white: ...
- 关于easyui的layout的region的resize的问题(自适应浏览器)
1. resize问题: $('#subWrap').layout('panel', 'east').panel('resize',{width:300}); $('#subWrap').layout ...
最新文章
- 邮箱@topgrid.cn是什么网站_典 藏 网 站 !
- NRF52832与W25Q80通信
- LDO和DC-DC的区别
- 【Cocos2d-X开发笔记】第一期 Cocos2d-X的环境搭建
- Part 2 – Deep analysis using Androguard tools
- 16、17、18_使用gridspec定义多子图,条形图(Bar plots),分组条形图,堆叠条形图(Stacked bar chart),饼图(Pie plots),甜甜圈图,嵌套饼图
- VC#2005 Starter Kit: Screen Saver 使用介绍
- c语言 bmp白底黑字,用c语言把bmp格式的彩色图片转换成黑白的
- 【城市沙龙】LiveVideoStack Meet|西安:人文历史遇到流媒体算法
- Linux通过GPIO状态实现按键上报(按键功能)
- Maven 单元测试报错:错误: 找不到或无法加载主类 @{failsafeArgLine}
- python开发技术详解代码_python开发技术详解(四)
- iOS开发实例 | Demo:数独小游戏
- c语言输入星期的首字母,10、实现中英文的转换,输入汉语星期几,输出该星期的英文名。可以用指针数组处理字符串。C语言...
- 2004年1月六级听力原文的启示:每顿饭后刷牙牙齿好
- 四大文明古国与六大文明
- Elasticsearch7.x索引index的备份和恢复,index索引误删恢复
- 高通TrueWireless Mirroring无缝的用户体验镜像技术
- 基于 React hooks + Typescript + Cesium 场景暗角效果
- KMP算法DNA的病毒检测
热门文章
- PHP无刷新上传面向过程写法iframe
- Yii抛出的各种异常
- php 获取时间段 今天昨天本周上周本月上月本季度本年去年
- 如果用户计算机已经与网络物理相连,计算机考试卷
- uibmodal模态框打开另一个模态框_进阶版神笔:只需一句话、一个故事,即可生成画面...
- springboot yml怎么建常量_Springboot中加载自定义的yml配置文件
- collection集合 地址_java.util包下的集合
- SpringBoot整合Shiro(认证+授权)
- php redis key,redis 在 php 中的应用(key篇)
- mysql数据自动备份_每天自动备份MySQL数据库的shell脚本