- 综合排序
- 最热优先
- 最新优先
- 来自专栏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 - 来自专栏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 - 来自专栏CMS建站教程
html页面手机适配方法
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale：允许用户缩放到的最大比例。 user-scalable：用户是否可以手动缩放。
5K20编辑于 2022-02-23 - 来自专栏胡哥有话说
单屏页面响应式适配玩法
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说一下，把能省略的字去掉写在最后大屏项目的各种适配问题
67611编辑于 2024-05-06 - 来自专栏IT小圈
Nginx 适配PC和手机端页面
有时候我们需要针对不同的访问方式指定不同的页面或者URL。 如仅是几个静态页面进行切换，那么可以用js进行判断跳转，如： 例子 有两个页面，分别是 index.html、index_m.html; index.html(假定电脑端) 添加如下 JavaScript nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8| g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8| |ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]
1.4K20编辑于 2023-06-15 - 来自专栏九彩拼盘的叨叨叨
移动端页面使用rem来做适配
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 页面 iPhoneX 刘海屏适配
随着这两年苹果坚定不移的走刘海屏路线，Hybrid 页面在 iPhoneX 上刘海屏的适配也是每个前端开发的小伙伴都会碰到的问题，今天就记录一下我关于刘海屏适配的部分经验。 但是为了比较，我这里给出一张苹果官方文档中，iPhone8之前的常规屏幕和刘海屏 Safe Area 区域的对比图。 ? 页面适配 在为页面适配刘海屏之前，我们首先得在页面的 meta 中添加一个新的值：viewport-fit=cover <meta name="viewport" content="viewport-fit 看一页目前的<em>页面</em>效果： ? WX20200531-205514@2x.png 可以看到现在我们的测试<em>页面</em>已经铺满了整个屏幕。 这个时候，我们来使用之前提到的 env 函数，<em>适配</em>刘海屏幕。 当你的<em>页面</em>不使用原生导航栏铺在整个屏幕中时，这就是一个不错的<em>适配</em>方案。
5K40发布于 2020-06-02 - 来自专栏.NET开发那点事
AgileConfig 1.8.0 已适配 .NET8
本月圈子里最大的事莫过于 .NET8 正式 release。群友们都在适配 .NET8。抽个周末我也把 AgileConfig 升级到了 .NET8。 升级 升级 .NET8 修改所有项目的目标框架为 .NET8.0 升级 nuget 包 在 nuget 包管理器里把所有能更新的包全部更新到最新。 这个问题其实跟 .NET8 没有关系，应该是我 3.1 升 6 的时候遗忘了。 把 6 改成 8，其他不用改，超级简单。 通过以上操作，在本地运行没有问题，打包成镜像后在本地 docker desktop 环境下跑也没问题。 只是最新的 .aspnet8 runtime 的镜像对低版本的 docker engine 兼容性有点问题，使用 docker 跑的同学需要注意一下。
65510编辑于 2023-12-11 - 来自专栏姬小光
写给设计师的移动页面适配小知识
我们先假定设计稿是按 640x960px 的规范输出，先来看看前端的常用适配方案。 前端适配方案 前端的适配方案大致分为四种：1，根据 meta 按比例缩放；2，根据页面宽度百分比适应；3，基于媒体查询的响应式方案；4，REM缩放方案。 ，我们都采用百分比适配方案。 一般除了一些创新的小公司，或者某些专题网站之外，很少会用一套代码来适配所有终端。比如 PC，Mobile，Pad 甚至 iWatch 等，全都用一套代码来适配显然是不科学的。 效果：按照设计稿等比缩放 场景：活动页面及部分平台页面 优点：开发方便，适应性好 缺点：等比缩放超大会显得不精致，脚本计算晚页面可能跳动 设计师与前端如何对接 了解了上面的一些适配方案之后，作为设计师同学就要首先确定
1.2K20发布于 2018-09-05 - 来自专栏编程内马尔
PC端、移动端的页面适配及兼容处理
PC端、移动端的页面适配及兼容处理 一、关于移动端兼容性 目前针对跨终端的方案，主要分为两大阵营：一套资源Vs两套资源。 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端； 第二种是通过终端判断分别调取两套资源以适配所有终端。 这两种思路我们并不能斩钉截铁的说哪一个更优选，正所谓”合适的才是最好的”。 思路一:通过响应式或页面终端判断去实现一套资源适配所有终端 优势：只需维护一套资源，维护成本较低。 劣势：需加载适配各个终端的各个资源，在不同终端通过响应式布局实现不同展现，部分交互效果需要在页面中做终端判断，代价较大，若图片资源为一套，部分图片在超高分辨率设备（例如iphone系列）下会失真，且在非 思路二:通过终端判断分别调取两套资源以适配所有终端 优势：可根据不同端做个性设计及个性化信息推送且可按需加载，如移动端可配合重力感应、不同手势做各种炫酷拽效果，pc页面可不受流量限制做适合pc端的效果。
3.8K20编辑于 2022-11-15 - 来自专栏前端开发进阶
移动端H5开发之页面适配篇
最近开发并上线了一款H5项目，在这里想和大家分享一下关于项目中使用到的移动端适配技巧，如果对你们有所帮助的话，就多多点赞收藏各位看官老爷别着急，在讲页面适配之前，我们先来捋一捋viewport（视口）的概念 1.3 理想视口图片视觉视口，用户通过屏幕真实看到的区域我们可以通过调用 window.screen.width / height 来获取视觉视口大小1.4 页面适配方法综上所述，为了在移动端让页面获得更好的显示效果 图片1.4.1 通过设置initial-scal来适配通过上文了解到，viewport有个initial-scale属性，用来定义页面初始缩放比率，我们是否可以通过动态的改变这个缩放值来进行适配呢，答案是可以的 淘宝的手淘团队，在做移动端适配时，使用的flexible方案核心就是rem适配，打开他们的github源码，会发现比rem逻辑多了一些dpr的处理。 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 - 来自专栏∑小熊猫的博客
Java 设计模式系列(8) —— 适配器模式
适配器模式 适配器模式的定义： 将一个类的接口变换成为客户端所期待的另一个接口，从而使原本因接口不匹配而无法在一起工作的两个类可以在一起工作。 采用适配模式的目的是将先有的旧接口转换成新的刻画短接口，我们的目标是尽可能多地重用原来已经测试过的代码，并且可以对新接口自由地进行修改。 适配器的三个角色： Target 目标角色：该角色定义要转换成的目标接口 Adaptee 源角色： 需要被转换的就的接口 Adapter 适配器角色： 通过继承Target 适配器的简单示例 ? System.out.println("Start DoingFunction"); super.doFunction(); System.out.println("End DoingFunction"); } } 适配器模式的优点和使用场景 优点： 适配器可以让两个没有任何关系的类在一起运行 增加了类的透明性 提高了类的复用度 提高代码的灵活性 使用场景： 在投产的系统中，对原有的类进行改造，使其适应新的接口
42510发布于 2021-01-06 - 来自专栏李维亮的博客
pc端屏幕显示设置缩放比例对页面布局的适配
利用device-pixel-ratio单独适配像素比 @media all and (-moz-min-device-pixel-ratio: 1.09) and (-moz-max-device-pixel-ratio 2.1), (min-resolution: 1.81dppx) and (max-resolution: 2.1dppx) { :root { font-size: 8px
1.6K30编辑于 2022-12-03 - 来自专栏vue学习
8、手机适配问题之rem和lib-flexible
前言：GitHub：https://github.com/Ewall1106/mall 一、关于lib-flexible.js flexible方案是手淘经过多年的摸索和实战，总结出的一套移动端适配方案 ，这里我推荐一篇w3c大漠老师的一篇文章使用Flexible实现手淘H5页面的终端适配，里面详细的讲解了该方案的使用和原理。 main.js 3、viewport设置 我们进入index.html页面中定义meta，该标签定义了用户通过手指放大缩小无效，页面比例始终为1:1 <meta name="viewport" content 一般很多人都喜欢使用px2rem-loader，因为比起cssrem确实方便很多，但由于我在工作中基于微信做h5页面的时候会使用vux组件库，如果安装这个，需要在build/utils.js中的cssLoader
1.8K20发布于 2018-09-04 - 来自专栏QQ音乐技术团队的专栏
全民k歌适配arm64-v8a方案
一个直观的表现就是，32位软件最大只能使用2^32=4G的内存，64位则是2^40=1T，可以看到，V8架构在性能方法无疑有着质的提升，程序适配后将有更好的性能表现。 2.全民k歌为什么要适配Arm64 虽然Arm64架构推出的时间也比较早，但由于市面上适配的设备寥寥，android厂商的主要soc提供商高通直到2014年才推出了第一款适配arm64-v8a的产品，同时由于 但是设备在实际运行时，仅使用apk中包适配自己的最新的那个架构，比如上面同时包含了armeabi-v7a和arm64-v8a两种架构，设备的cpu最新架构是arm64-v8a，虽然设备使用V7a的so也能使用 各业务更新好so之后，添加到上面工程对应路径libs/arm64-v8a即可，如果对应的java接口没有变更，到这就算完成里初步的适配了，剩下的就是功能调试和业务自测。 而全民K歌通过动态加载的模块较多已经有8个模块，这样8个模块的资源路径都注册到这个数组里肯定导致了大小溢出从而导致了问题的出现。
4.3K11发布于 2021-02-05 - 来自专栏技术进阶之路
使用 Axure RP 8 进行滑动页面设计
，那么所有的内容就是二级页面；例如淘宝首页，它的二级页面其实是无限大的，因为无论你怎么往下拉永远拉不到底? ，所以我们在做原型的时候需要将内容都放到二级页面上，以及页面只是控制显示大小的。 一、垂直滑动 垂直滑动需要两个动态面板，为了区分方便，我们将其命名为一级页面和二级页面。 最后再打开二级页面的 state1， 添加进去内容就可以了。 ? 接下来添加交互。 由于我们拖动的是一级页面，所以应该给一级页面添加一个拖动的交互： ? 一级页面拖动的时候会移动二级页面，移动的方式是垂直拖动；然后我们还添加了一个边界。 那么区间范围就是[646,1120]（一级页面的长，二级页面的长），道理是一样的。
2.4K10发布于 2021-06-21 - 来自专栏Java修行之道
tomcat8 manager页面限制IP访问
tomcat8 manager页面限制IP访问 配置tomcat8/webapps/manager/META-INF/context.xml <Context antiResourceLocking=" Valve className="org.apache.catalina.valves.RemoteAddrValve" allow="yourIP" /> </Context> tomcat manager页面是非常私密的页面
2.4K10发布于 2019-02-25
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号