h5页面 input文本大小在ios不适配的问题

最新推荐文章于 2023-10-30 10:50:00 发布
最新推荐文章于 2023-10-30 10:50:00 发布
阅读量172 收藏
点赞数
文章标签： 前端 javascript html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_69675092/article/details/132336824
版权

问题：扫码出来的h5页面select下拉框和input文本大小不一致，如图

 安卓扫出的页面没有这个问题

最开始的解决办法是每个input加上style固定字体大小====》不生效

把所有字体改成单位为rem====》不生效

最后在同事的帮助下，给html加上了一个字体大小

html{
				font-size: 18px;
			}

原因：因为rem单位的大小是有一个相对值的，只有给整体设置了大小，rem才能生效

Camilleจุ๊บ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iOS和android h5字体差异,关于移动hybrid开发中H5页面的字体应与系统保持一致的问题...
weixin_27310985的博客
05-26 1331
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？0、问题来源在移动hybrid开发，也就是说，部分页面会使用html+css+javascript技术来制作，例如个人中心，收藏页面等。一般来说，移动端都会将字体设置为system系统默认类型。起初，愚钝的我认为，只要在css里不设置任何字体，将会默认使用系统默认字体。然而结果并未如我所想，页面出来后，中文、英文和数字几...
详解Android WebView的input上传照片的兼容问题
08-29
在iOS设备上，这个功能通常能正常工作，但在某些Android设备上，点击该input元素却没有响应，这并非简单的权限问题。 解决方法： 1. 权限设置：首先，确保应用已经获取了读取存储和相机的权限。在Android 6.0及以上...
解决h5 开发 ，设置手机字体大小微信设置字体大小 页面变形问题
weixin_45379180的博客
11-11 1232
1 https://www.cnblogs.com/luoyihao/p/12385975.html 1 ios系统： body{ -webkit-text-size-adjust: 100% !important; } 安卓系统： 复制代码 (function() { if (typeof WeixinJSBridge == “object” && typeof WeixinJSBridge.invoke == “function”) { handleFontSize(); } else
vue项目H5页面在苹果手机点击输入框输入内容时 页面自动放大
Cool_so_cool的博客
06-02 1050
用vue写H5页面时,iPhone手机点击input搜索框,输入内容时,页面会自动放大。在public文件夹下找到html文件，打开后加上user-scalable=no 就行。亲测有效，已解决问题。
h5项目解决苹果手机iOS系统字体放大问题
LYM2020521的博客
02-23 1325
h5项目解决苹果手机iOS系统字体放大问题: -webkit-text-size-adjust: none;
input搜索框在ios系统中兼容问题
qq_48648782的博客
11-24 2713
input搜索与ios适配兼容问题 场景：h5页面在手机上嵌入时，会有搜索框并且改变键盘“搜索”字体的需求 问题1：ios下input中type=“search”，键盘中不变“搜索”的问题 <input type="search" placeholder="搜索生" v-model="searchValue" @keypress.13="goSearch()" /> ​ 解决：在input标签的外面嵌套form
h5app拍照或者图库选择图片限制图片数量demo
04-12
5. **移动端适配**：考虑到H5应用在移动设备上的运行，需要考虑不同屏幕尺寸、操作系统（如iOS、Android）以及浏览器的兼容性问题。 6. **图片上传策略**：对于图片数量的限制，可以采用两种策略：一是前端限制，...
H5调用相机拍照并压缩图片的实例代码
09-27
这是一个常见的需求，特别是在开发移动Web应用时，用户可能需要通过H5页面上传照片。以下是一些关键知识点： 1. **H5调用相机**： HTML5提供了一种简单的方式调用设备的相机功能。可以通过`<input>`标签的`type=...
uni-app 实现聊天页面滚动到最底部
01-23
uni-app是一款基于Vue.js的多端开发框架，它允许开发者编写一次代码，就可以在iOS、Android、H5、微信小程序等多个平台运行。它的核心是Vue.js，因此我们可以利用Vue的组件化特性来构建聊天页面。 在创建聊天页面时...
毕业设计-前端页面（包括小程序与网页端）.zip
09-27
"uni-app"是H5移动应用的跨平台开发框架，由Eachat公司推出，它允许开发者编写一次代码，即可在iOS、Android、微信小程序、支付宝小程序等多个平台上运行。在"graduationFront-uniapp-main"这个压缩包中，我们可以...
iOS中input框问题
09-19
解决苹果手机中input输入框,在弹出软键盘之后,fixed定位失效的问题,是用css解决的
ios7 低版本系统调整字体大小，导致H5内字体大小发生变化
web工程师——小发发
03-25 530
在iPhone7系统中设置了“更大字体”（13版本）里调整字号后，各个应用里Webview里的文本字体大小是没有什么影响的。但是一些分享页面喝微信、UC浏览器等可以在APP里设置网页字体大小的应用，还是有限制调整字号的需求的。它们调整字体大小是给body设置-webkit-text-size-adjust属性实现的，因此只要限制这个属性不被修改即可： body { -webkit-text-size-adjust: none !important; } 用-webkit-text-size-a
h5在ios端app中嵌套 字体异常放大
weixin_45730243的博客
09-13 300
【代码】h5在ios端app中嵌套 字体异常放大。
ios点击input输入框 页面变大 (禁止浏览器缩放)
业余前端的职业经历
03-02 1589
本来这个东西是为了优化用户体验,手机上点击输入框太小了 所以会在用户点击的时候放大屏幕中的内容。user-scalable=no 这个加到html中的head中。关注我 持续更新前端知识。我们其实是可以禁止的。
H5页面在苹果手机上点击输入框页面会放大
最新发布
notagoodwriter的博客
10-30 955
里写地图点位搜索框 点击搜索框的时候 在苹果手机上 页面会放大。因为代码里未标识移动端元信息。安卓不会出现这种问题。
IOS手机Input/Textarea唤起键盘页面偏移和放大的解决方法
MichelleZhai的博客
03-10 2418
在家里办公的弊端就是需要测试机的时候一筹莫展，奈何公司的在线模拟网络设备平台又不具备ios的多种手机型号，遇到这种兼容性的问题真是头大
ios手机点击输入框页面放大，输入框失焦后，页面不复原，仍保持放大状态
rainbow8300的博客
03-28 2277
解决方法就是，禁止页面缩放 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩...
vue使用popup弹出层组件时使用input造成ios不兼容问题
linguo2625469的博客
08-07 1757
在做公司的混合app时 有一个点击按钮弹出一个固定定位在底部的弹出层，只有弹出层时没问题 可是弹出层里需要输入数据，就造成了bug 输完数据关闭软键盘后，软键盘的位置会显示空白 遮挡住弹出层，并且弹出层无法被点击，经过查阅，监听软键盘的弹出和关闭事件 关闭时把页面滑动一下即可恢复正常 但是有点生硬 总比以前强了 写在vue的mounted里即可 let u = navigator.user...
H5页面苹果手机点击输入框输入内容时 页面自动放大
m0_66089610的博客
03-18 687
处理：H5页面苹果手机点击输入框输入内容时，页面会自动放大
在h5页面禁止ios的惯性回弹问题
04-05
可以通过以下方法来禁止iOS的惯性回弹： 1. CSS样式禁止惯性滚动： ``` body { overscroll-behavior: none;...以上方法可以在h5页面的body元素上直接设置，或者在需要禁止惯性回弹的具体元素上设置。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值