- 综合排序
- 最热优先
- 最新优先
- 来自专栏编程之旅
H5 页面 iPhoneX 刘海屏适配
随着这两年苹果坚定不移的走刘海屏路线，Hybrid 页面在 iPhoneX 上刘海屏的适配也是每个前端开发的小伙伴都会碰到的问题，今天就记录一下我关于刘海屏适配的部分经验。 safe-area.png 很明显，在讨论适配之前，我们的页面一般有两种分类： 1、H5 页面使用原生 App 的 Navigation Bar 导航栏，此时，status bar 状态栏和导航栏都是原生控件 2、H5 页面在 iOS 中占据全屏页面，在这种情况下，除了要兼顾底部小黑条，我们还要处理页面上部跟 状态栏接触的部分，避免内容出现在状态栏上。 页面适配 在为页面适配刘海屏之前，我们首先得在页面的 meta 中添加一个新的值：viewport-fit=cover <meta name="viewport" content="viewport-fit 当你的<em>页面</em>不使用原生导航栏铺在整个屏幕中时，这就是一个不错的<em>适配</em>方案。
5K40发布于 2020-06-02 - 来自专栏前端开发进阶
移动端H5开发之页面适配篇
最近开发并上线了一款H5项目，在这里想和大家分享一下关于项目中使用到的移动端适配技巧，如果对你们有所帮助的话，就多多点赞收藏各位看官老爷别着急，在讲页面适配之前，我们先来捋一捋viewport（视口）的概念 1.3 理想视口图片视觉视口，用户通过屏幕真实看到的区域我们可以通过调用 window.screen.width / height 来获取视觉视口大小1.4 页面适配方法综上所述，为了在移动端让页面获得更好的显示效果 图片1.4.1 通过设置initial-scal来适配通过上文了解到，viewport有个initial-scale属性，用来定义页面初始缩放比率，我们是否可以通过动态的改变这个缩放值来进行适配呢，答案是可以的 ，那就是不能设置一个最大宽度的阀值，只能跟着浏览器视图大小的改变而变化，这样对于一些想要在pc和h5都要正常展示的项目不太友好1.4.5 针对刘海屏的兼容针对iphoneX以上具有刘海屏的机型，也有对应的适配方案 1.5 总结说了这么多，我们简单的来总结一下：1.对于需要移动端、PC端都正常展示的项目推荐使用rem布局；2.对于只在移动端展示，且内容量较少的页面推荐使用vw布局;当然媒体查询@media也可以用来进行页面适配
8.4K92编辑于 2022-06-10 - 来自专栏娱乐心理测试
h5页面适配iPhone X的方法
项目接近尾声，测试时突然想起还有iphoneX需要适配，虽然页面都是自适应，但是由于iPhone X的特殊性，还是需要特殊对待。 因为这个h5项目嵌入在原生项目中，适配就会有有种方式：1.在原生中用原生的的方法适配 2.在前端页面中用h5的方式适配。 一.原生适配iphoneX 原生适配很简单，查看机型图： ? 优点：在原生中适配，h5页面不用更改任何一句代码。 缺点：1)意味着如右图某些通栏页面无法实现， ? image 2）顶部和底部显色固定，无法适应页面颜色，（王者荣耀用链接地址传递参数的形式在原生中完美适配，不太明白原理） ---- ** 一.h5页面适配iphoneX** ** 1.viewport-fit 适配方案** PhoneX的适配，在iOS 11中采用了viewport-fit的meta标签作为适配方案；viewport-fit的默认值是auto。
2.1K10发布于 2018-12-28 - 来自专栏centosDai
「移动端」Web页面适配
一、什么是移动端适配 移动端 Web 页面，就是常说的手机 h5页面、webview页面、公众号开发的网页等。 由于手机机型较多，各个手机的屏幕尺寸不一样，所以做移动端页面，需要考虑在安卓和ios的各种尺寸设备的兼容问题，我们要做的 web 页面适配，就是为了在不同设备上，页面能够保持统一展示效果，或等比缩放。 二、移动适配方案 常见的移动适配方案有以下几种： viewport 盒模型 flex rem 2.1、viewport - 可视区 最初手机端需要照顾 PC 端，如果不设置 viewport，直接访问网页的时候 ，我们发现网页内容看着很小，这是因为页面按照PC端最小宽度980展示的，也就是我们的网页宽度就是980，而手机屏幕宽度通常375、411、320、414等，没有980那么大，所以页面被缩小了很多。 ，是一个数字，可以是小数 maximum-sacle - 设置页面最大缩放值，是一个数字，可以是小数 user-scalable - 是否允许用户进行缩放，值为'yes'或者'no',yes表示可缩放，
1.8K40发布于 2021-09-30 - 来自专栏centosDai
「移动端」Web页面适配
一、什么是移动端适配 移动端 Web 页面，就是常说的手机 h5页面、webview页面、公众号开发的网页等。 由于手机机型较多，各个手机的屏幕尺寸不一样，所以做移动端页面，需要考虑在安卓和ios的各种尺寸设备的兼容问题，我们要做的 web 页面适配，就是为了在不同设备上，页面能够保持统一展示效果，或等比缩放。 二、移动适配方案 常见的移动适配方案有以下几种： viewport 盒模型 flex rem 2.1、viewport - 可视区 最初手机端需要照顾 PC 端，如果不设置 viewport，直接访问网页的时候 ，我们发现网页内容看着很小，这是因为页面按照PC端最小宽度980展示的，也就是我们的网页宽度就是980，而手机屏幕宽度通常375、411、320、414等，没有980那么大，所以页面被缩小了很多。 ，是一个数字，可以是小数 maximum-sacle - 设置页面最大缩放值，是一个数字，可以是小数 user-scalable - 是否允许用户进行缩放，值为'yes'或者'no',yes表示可缩放，
2.9K40发布于 2021-10-01 - 来自专栏centosDai
「移动端」Web页面适配
一、什么是移动端适配 移动端 Web 页面，就是常说的手机 h5页面、webview页面、公众号开发的网页等。 由于手机机型较多，各个手机的屏幕尺寸不一样，所以做移动端页面，需要考虑在安卓和ios的各种尺寸设备的兼容问题，我们要做的 web 页面适配，就是为了在不同设备上，页面能够保持统一展示效果，或等比缩放。 二、移动适配方案 常见的移动适配方案有以下几种： viewport 盒模型 flex rem 2.1、viewport - 可视区 最初手机端需要照顾 PC 端，如果不设置 viewport，直接访问网页的时候 ，我们发现网页内容看着很小，这是因为页面按照PC端最小宽度980展示的，也就是我们的网页宽度就是980，而手机屏幕宽度通常375、411、320、414等，没有980那么大，所以页面被缩小了很多。 ，是一个数字，可以是小数 maximum-sacle - 设置页面最大缩放值，是一个数字，可以是小数 user-scalable - 是否允许用户进行缩放，值为'yes'或者'no',yes表示可缩放，
2K40编辑于 2021-11-30 - 来自专栏林焕彬的专栏
iPhone X 适配手Q H5 页面通用解决方案
对于手Q中的各业务来说，受iPhone X影响的H5页面挺多，应该采取什么快速有效的办法来应对呢？ 目前的H5页面可以分为通栏页面和非通栏页面两种，每种页面都可能有底部操作栏，具体如下： 通栏页面 顶部通栏 某些业务的一级页面多数使用了顶部通栏banner的效果，由于iPhone X在状态栏增加了24px 解决方案：对于通栏页面在页面顶部增加一层高度44px的黑色适配层，整个页面往下挪44px。 viewport-fit属性 在H5页面链接一个iphonex.css来给iPhone X访问的页面增加对应的适配层 在H5页面上给对应的dom结构加上适配的类名 iphonex.css @media 底部适配层颜色在主资源加载完成后填充颜色 对于顶部通栏的页面，通过加URL参数来增加顶部黑色适配层。
13.6K1911发布于 2017-11-10 - 来自专栏CMS建站教程
html页面手机适配方法
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale：允许用户缩放到的最大比例。 user-scalable：用户是否可以手动缩放。
5K20编辑于 2022-02-23 - 来自专栏胡哥有话说
单屏页面响应式适配玩法
375 x 667 IPhone 6 Plus: 414 x 736 IPhone X: 375 x 812 不上不下的 IPad: 768 x 1024 5、 分析 我们以宽度 1024 及以下算作移动端，以上算作 PC 端，所以两种选择 移动端适配一个移动端页面，PC 端适配一个 PC 端页面。 设计之初就想好一个页面适配两端，当然这个设计稿需要比较符合适配两端的条件。 6、别人适配是怎么做的？ 7、自身情况及实现 我们是分两个页面做的，先看一下 PC 端设计稿 ? 结合动画的展现形式，其实并不是很理想做响应式，但还是要适配。 看看效果（当然这个是最终效果，只改变宽度的拉伸适配在最后会说）： 8、特殊场景 这里就是刚刚说到的 分辨率超大，然后高度居很高，只把宽度缩很小的情况，因为设计稿是长宽比例为横向矩形，所以明显与用长宽比为竖向的矩形来看页面是背道而驰的
2.4K20发布于 2019-09-12 - 来自专栏前端开发
大屏页面按需解决适配问题
页面结构一个整页的静态背景图，一个头部标题图，中间六边形图，和下面会动的光圈(代码实现的旋转效果)，六边形左右是四个树形图初版实现方式页面的头部很简单，背景图和标题水平居中，两个条件区域使用绝对定位靠左靠右分别处理根据 在实际测试中发现另外一个问题，在当前页面设置对应的比例后，在其他页面也会默认使用对应的比例，如果其他页面的内容没那么多，默认百分百比例就行的话，这样效果就不好了，为解决这种情况，在 beforeDestroy () 中把页面比例再调整成百分百，并且移除 resize 监听事件 beforeDestroy() { function handleResize() {} window.removeEventListener 也添加了缩放效果，笔记本中左侧数据依然显示不完整产品设计问题，由于左上角的内容显示太多了，显示不全，把 元/头 和 母猪 这两部分可省略的字都去掉就行了，找产品，跟Ta说一下，把能省略的字去掉写在最后大屏项目的各种适配问题
67511编辑于 2024-05-06 - 来自专栏IT小圈
Nginx 适配PC和手机端页面
有时候我们需要针对不同的访问方式指定不同的页面或者URL。 如仅是几个静态页面进行切换，那么可以用js进行判断跳转，如： 例子 有两个页面，分别是 index.html、index_m.html; index.html(假定电脑端) 添加如下 JavaScript ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5| 01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5) |tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70
1.4K20编辑于 2023-06-15 - 来自专栏前端菜鸟变老鸟
手机H5页面（文字滚动、适配各种屏幕、jQuery ajax包含cookie）
###手机H5页面 ###文字滚动 使用li标签，通过改变margin-top实现向上滚动。 "">王五 男 35 ###手机页面适配各种屏幕
4.9K20发布于 2018-10-10 - 来自专栏九彩拼盘的叨叨叨
移动端页面使用rem来做适配
假设根元素的字体大小是10px, 则5rem的大小为 5*10=50px,例如 html{ font-size: 10px; } p{ width: 2rem; /* 2*10 = 20px ;*/ margin: 1rem; } rem来做适配 以前我们往往这样做页面：viewport width 设置为 device-width，然后选我们需要兼容设备的最小宽度（一般是320px 根据这最小宽度来做页面。单位使用px和百分比。在宽度不同的设备上，页面的字体大小，内容尺寸都是一样的，不同的是，大屏的内容间的空隙比小屏的大。 所以这样做的缺点就是，页面在某些尺寸的设备上显示的效果不好。 如果用rem来页面，我们会根据不同的设备宽度在根元素上设置不同的字体大小。宽度越宽，字体越大。然后对原本使用px的地方使用rem来替换。 为了能将设计稿中的 px 方便的转换为页面中 rem，我设置 1rem 为 宽度为 640px 的设计稿中的 100px。
1.1K30发布于 2018-08-27 - 来自专栏禅林阆苑
H5页面适配及微信默认字号问题的最佳实践
H5页面适配及微信默认字号问题的最佳实践 Write By CS逍遥剑仙 我的主页: csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: 使用 rem 进行移动端页面适配 移动端适配最简单的是通过js动态计算 viewport 的缩放值，但过于粗暴，会导致页面图片文字失真模糊。 总体来说，使用 rem 进行适配需要以下四步： 先根据设计稿尺寸使用 px 完成页面 设置 meta，控制视口宽度，按 1:1 比例渲染页面 <meta name="viewport" content= 横版页面的 rem 适配 上面第二部分通过动态设置 html 的 font-size 已经实现了页面随设计稿比例缩放，这种方式是页面宽度 100% 撑满设备宽度的，但是很多情况下，我们更希望部分横版页面能够高度撑满设备高度 设计宽度 var maxWidth = parseInt(doc.body.getAttribute('data-max-width')) || designWidth // 最大页面适配宽度
4.2K140发布于 2021-04-04 - 来自专栏青梅煮码
vue移动端h5页面根据屏幕适配的四种方案
最近做了两个关于h5页面对接公众号的项目，不得不提打开微信浏览器内置地图导航的功能确实有点恶心。下次想起来了的话，进行总结分享一下如何处理。 在vue移动端h5页面当中，其中适配是经常会遇到的问题，这块主要有死个方法可以适用。 www.cnblogs.com/2050/p/3877280.html 关于 viewport 的，这块直接引用上面文章的内容，我感觉也是最干脆最直接的总结了吧 方法三：使用js+viewport动态设置手动适配 -- QQ应用模式 --> <meta name="x<em>5</em>-page-mode" content="app"> <! 目前全网找或者是尝试来看，确实没有一个十全十美的适配的解决方案，只能不断在实践应用当中慢慢填坑 百撕可乐
5.3K20编辑于 2023-03-13 - 来自专栏前端小叙
html5 移动适配写法
，所需的注释应为: <link rel="canonical" href="http://mobile_url" > 之前的Meta标记（mobile agent）会继续沿用，但我们推荐使用HTMAL5语言制作的移动页面使用最新方案进行跳转适配 ，其它如xml语言的移动页跳转适配，需要继续使用之前的meta标记方式: <meta name="mobile-agent"content="format=[wml|xhtml|html<em>5</em>]; url= mobile_url"> html5新增的移动适配写法如上,这个主要是为了百度等搜索引擎抓取到网站的移动端网址是什么,不是自动当设备切换到手机时自动跳转的.若实现自动跳转还需要js.
2.4K50发布于 2018-04-12 - 来自专栏游戏多媒体引擎GME开发前沿
GME SDK 2.9.4，Unity WebGL适配UE5适配PS5适配语音转文本优化文本翻译优化
游戏多媒体引擎 SDK 2.9.4 正式版本已上线，可在【腾讯云官网-游戏多媒体引擎GME产品页-产品文档-SDK下载指引】中下载，或点击本文下方【阅读原文】直达页面。 v2.9.4版本主要更新1、新增适配 Unity WebGL 平台2、适配 Unreal Engine 5 引擎新版本3、适配 PlayStation 5 平台新版本4、语音转文本接口中，新增翻译参数以往版本中 涉及到的客户端 API：StartRecordingWithStreamingRecognition5、文本翻译功能中，新增返回语种检测结果文本翻译功能支持自动识别源语种，并支持一次请求翻译成多种目标语言
1.4K20编辑于 2022-09-08 - 来自专栏互联网软件技术
H5移动端rem适配
1 /** 2 * 移动端自适应 3 */ 4 <meta name="viewport" 5 content="width=device-width,user-scalable --user-scalable=yes/no 是否可对页面进行缩放，no 禁止缩放--> 10 // <! --initial-scale=1.0 页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放--> 11 // <! --maximum-scale=1.0 可视区域的放大级别--> 1 /** 2 * rem适配 iPhone5下html字号为100px，320px下1rem=100px 3 */ 4 (function (doc, win) { 5 var docEl = doc.documentElement, 6 resizeEvt
1.6K40发布于 2018-10-24 - 来自专栏姬小光
写给设计师的移动页面适配小知识
我们先假定设计稿是按 640x960px 的规范输出，先来看看前端的常用适配方案。 前端适配方案 前端的适配方案大致分为四种：1，根据 meta 按比例缩放；2，根据页面宽度百分比适应；3，基于媒体查询的响应式方案；4，REM缩放方案。 ，我们都采用百分比适配方案。 一般除了一些创新的小公司，或者某些专题网站之外，很少会用一套代码来适配所有终端。比如 PC，Mobile，Pad 甚至 iWatch 等，全都用一套代码来适配显然是不科学的。 效果：按照设计稿等比缩放 场景：活动页面及部分平台页面 优点：开发方便，适应性好 缺点：等比缩放超大会显得不精致，脚本计算晚页面可能跳动 设计师与前端如何对接 了解了上面的一些适配方案之后，作为设计师同学就要首先确定
1.2K20发布于 2018-09-05 - 来自专栏编程内马尔
PC端、移动端的页面适配及兼容处理
PC端、移动端的页面适配及兼容处理 一、关于移动端兼容性 目前针对跨终端的方案，主要分为两大阵营：一套资源Vs两套资源。 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端； 第二种是通过终端判断分别调取两套资源以适配所有终端。 这两种思路我们并不能斩钉截铁的说哪一个更优选，正所谓”合适的才是最好的”。 思路一:通过响应式或页面终端判断去实现一套资源适配所有终端 优势：只需维护一套资源，维护成本较低。 劣势：需加载适配各个终端的各个资源，在不同终端通过响应式布局实现不同展现，部分交互效果需要在页面中做终端判断，代价较大，若图片资源为一套，部分图片在超高分辨率设备（例如iphone系列）下会失真，且在非 // targrt-densitydpi *///通过顺序设置5次来实现适配 直到 Math.abs(window.innerWidth-480)<=10 表示viewport设置正确了。
3.8K20编辑于 2022-11-15
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号