IOS h5页面采坑记录

最新推荐文章于 2022-09-07 10:54:58 发布

原创最新推荐文章于 2022-09-07 10:54:58 发布 · 800 阅读

0 ·

CC 4.0 BY-SA版权

ios h5 页面专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一种方法来解决iOS设备上HTML输入框显示内边框的问题。通过使用CSS属性-webkit-appearance:none，可以有效移除不美观的默认样式。

部署运行你感兴趣的模型镜像

1. input 输入框样式

IOS上回会有个很丑的内边框

添加 -webkit-appearance: none; 就可以去掉

  input {
    height: 100%;
    width: 100%;
    box-shadow: none;
    outline: none;
    padding: 0 10*@p;
    border: none;
    border-radius: 4*@p;
    -webkit-appearance: none; /** 去掉内阴影 */
  }

去掉效果

您可能感兴趣的与本文相关的镜像

EmotiVoice

AI应用

EmotiVoice是由网易有道AI算法团队开源的一块国产TTS语音合成引擎，支持中英文双语，包含2000多种不同的音色，以及特色的情感合成功能，支持合成包含快乐、兴奋、悲伤、愤怒等广泛情感的语音。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Candy_home

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue3：解决H5网页苹果ios手机键盘弹起再收回的时候页面会留白问题，页面软键盘弹起后页面下方空白区域，vue3 h5页面在iphone手机上底部会有留白解决办法（兼容微信公众号H5微信内置浏览器）

高级前端工程师

11-01

3107

vue3 H5解决IOS端微信H5页面软键盘弹起后页面下方留白的问题，h5页面在iphone手机上底部会有留白解决办法，vue3 h5页面IOS唤起键盘后--导致页面底部空白问题，vue3移动端解决h5页面在ios端输入框失去焦点后页面底部留白问题，微信浏览器中，微信H5项目，ios端出现了软键盘输完隐藏后页面不会回弹，下方会有一大块留白，iOS Safari浏览器，h5 移动端 iphone键盘弹起再收回的时候，页面会留白，需要手动下拉，ios弹出键盘后，页面位置有一截空白，移动端IOS的H5页面被键盘顶

如何在iOS应用中更好的调试H5页面

风·之痕的博客

03-23

9109

在APP中，H5页面可以通过加载vConsole脚本，来查看页面的日志、异常、网络加载、设备信息、储存信息、元素。但是，JS脚本加载于页面Dom挂载之后，这样就会使得这一区间的信息丢失，而且vConsole的Error也会有采集不到的情况。本篇先简单讲述WKWebView的加载流程，再通过Safari网页检查器，实现H5页面的调试与问题定位。

参与评论您还未登录，请先登录后发表或查看评论

iOS开发趋势：Native与H5+JS 解决方案

群鸿

07-31

6984

支付宝红包火了，微信红包火了，作为开发者，敏感的就发现之前并不被看好的H5已经悄悄渗透进来，在原生（Native）代码中部分功能采用动态网页（HTML5+JavaScript）来实现，即保证了整体App的流畅度，又能及时推出一些活动和动态，目前主流App已经开始默认这种开发模式，未来的移动开发团队也需要H5的小伙伴加入进来了，实现动静结合，让页面更加灵活多变，接下来笔者就根据之前涉及到的项目经验来

ios与H5通过WKWebView交互详解

zxtc19920的博客

05-25

4627

WK的基本用法先不说了,主要在这里记录一下使用WKWebView在于H5交互时走过的一些坑,以及如果web端的同学如果没有做过和ios端的交互,那么自己也可以去帮助web端去完成;另外在调试过程中,也不用一味的去等待和H5去联调,可以自己写一个本地的链接供自己去提前调试这里主要写js调用OC的两种场景首先需要和H5端去定义一些协议,来完成不同的功能,例如:在app的H5界面,进入OC的某个...

iOS开发transform的使用

a359798678的博客

07-28

214

// // ViewController.m // 18-transform的使用 #import "ViewController.h" @interface ViewController () @property(nonatomic,assign)CGFloat ty; - (IBAction)up:(id)sender; - (IBAct...

H5页面IOS白屏，安卓正常显示问题处理

qq_38348311的博客

08-30

1989

H5页面IOS白屏，安卓正常显示问题处理

h5在iOS上，回退页面，出现白屏，滑动页面，页面正常展示

swallow_y的博客

12-11

2822

问题：h5在iOS上，回退页面，出现白屏，滑动页面，页面正常展示 scrollRestoration 描述：h5在ios上，第一个页面超过一屏，点击进入第二个页面，第二个页面滑动超过一屏时，返回第一个页面时，第一个屏幕有一块白的盖在上面，滑动页面，白屏消失，页面正常展示。这块白的是第二个页面滚动的部分，盖在第一个屏幕上了。解决方法：window.history.scrollRestoration会记录上一个页面滚动的位置。值：auto,将恢复用户已滚动到的页面上的位置; manual,未还原页上的位置。

H5混合开发IOS中遇到的坑

08-28

以下是一些在iOS上常见的坑及其解决方案： 1. **iOS系统手机无法自动播放音频** 苹果出于用户交互考虑，默认禁止了网页中的音频自动播放。解决这个问题，可以在页面加载完成后手动触发播放事件，如`document....

iOS H5 history.back() 返回上一路由页面白屏

yujin0213的博客

09-08

5943

问题描述最近在做H5项目的时候，发现使用history.back()在IOS上返回上一页的时候，会有很严重的bug。我的场景是列表页滚动了超出一屏之后，进入详情页，再点击返回列表页，在iOS上就出现了白屏的现象，但是触屏或者滑一下，页面就又恢复了。解决方案 1、使用绝对定位这个也是参考了网上的写法，把列表页高度设为100%，绝对定位 .container { positio...

手机h5页面长按复制完整代码

04-28

这个“手机H5页面长按复制”代码示例不仅适用于Android设备，也兼容iOS系统，通过适当地调整触摸事件和兼容性处理，确保在各种移动浏览器上都能正常运行。在实际开发中，可能还需要考虑更多的细节，比如防止误触、...

详解IOS微信上Vue单页面应用JSSDK签名失败解决方案

12-10

在iOS上的微信环境中，Vue单页面应用（SPA）在使用Vue-Router的history模式时，调用微信JSSDK的相关API，如扫码、分享等，可能会遇到签名失败的问题。这是因为Vue-Router在进行路由切换时，会操作浏览器的历史记录，...

苹果手机H5页面元素内容高度设置无效

m0_61233367的博客

09-07

852

在该样式中加入 flex-shrink: 0; 试一试。

现在ios html5审核,ios 审核被拒

weixin_36015177的博客

07-17

716

Guideline 5.0 – LegalYour app contains content – or facilitates, enables, and encourages an activity – that is not legal in all of the locations where the app is available.Next StepsTo resolve this is...

iOS 审核被拒解决方案总结

weixin_33968104的博客

03-03

1779

未添加相应权限问题 xcode 9后明确要在 plist 文件中添加的权限  <key>NSPhotoLibraryUsageDescription</key> <string>需要您的同意,XXX才能访问您的相册</string>  <key>NSCameraU

h5开发的app过不了ios审核_H5封装APP是否能够上架苹果商店？

weixin_39797758的博客

12-27

4726

现在开发一款app已经不是一件难事了，自己都可以通过app在线封装平台制作一款app，但是很多朋友会觉得自己封装的app对上架有些不明白，你接下给大家介绍一下app在线免费封装可不可以上架？ 1.首先我们要明确自己在线封装的APP是单端（安卓/ios），还是双端都需要 2.如果是ios应用需要上架苹果市场的话，目前H5封装的APP是很难通过苹果商店的审核，不过可还是有些...

那些H5在Android和IOS上出现的丧心病狂的坑

最新发布

10-12

解决IOS Safari浏览器H5页面滑动停止卡顿的方法有以下几种： - **禁止页面在默认的body滚动，改为内部容器滚动**：使用uniapp开发H5时，若遇到页面滑动时底部tabbar卡顿和抖动问题（仅在iOS的Safari浏览器出现），可禁止页面在默认的body滚动，而是让它在内部容器里滚动。示例代码如下： ```html <view class="noscroll"> <div class="home-page"> </div> </view> ``` ```css .noscroll { height: calc(100vh - var(--tab-bar-height) - env(safe-area-inset-bottom)); overflow: hidden; } .home-page { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; } ``` 这样可以避免因默认body滚动带来的卡顿问题，不过tabbar本身可能存在其他问题，除tabbar外的fixed元素未出现类似情况 [^1]。 - **使用JavaScript控制滑动行为**：通过记录滑动的开始和当前Y坐标，禁用手机默认的触屏滚动行为，在特定条件下阻止滑动，从而减少卡顿。示例代码如下： ```javascript var startY, endY; // 记录滑动的开始Y坐标和当前Y坐标 $('body').bind('touchstart', function (e) { startY = e.originalEvent.changedTouches[0].pageY; }); // 禁用手机默认的触屏滚动行为 $('body').bind('touchmove', function (e) { console.log("touchmove"); if (!$(e.target).is($('.mobi_DbodyBox')) && !$(e.target).parents('.mobi_DbodyBox').length > 0) { e.preventDefault(); } else { checkScroll(e); } }); function checkScroll(e) { console.log("check"); endY = e.originalEvent.changedTouches[0].pageY; // 若已经移到页面最上方，则不允许再向下滑动 if ($('.mobi_DbodyBox').scrollTop() == 0 && endY > startY) { e.preventDefault(); } // 若已经移到页面最下方，则不允许再向上滑动 if ($('.mobi_DbodyBox').scrollTop() + $('.mobi_DbodyBox').height() == $('.mobi_DbodyBox')[0].scrollHeight && endY < startY) { e.preventDefault(); } } ``` 此方法能在一定程度上解决橡皮筋效果，改善滑动卡顿 [^5]。 - **实际开发方案尝试**：在实际开发中有三种方案可供尝试。方案一是在微信中浏览H5网页时可解决橡皮回弹效果，但在iOS端微信授权跳转和Safari浏览器打开时存在遮挡问题，体验不佳；方案二能使回弹效果得到一定改善，体验效果较方案一有提升；方案三最简单直接，可解决卡顿问题 [^3]。