为什么H5 手机端iOS浏览器页面样式会发生变化？

最新推荐文章于 2024-08-04 03:56:46 发布
最新推荐文章于 2024-08-04 03:56:46 发布
阅读量759 收藏
点赞数
文章标签： ios css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37746495/article/details/130320261
版权
当使用iPhone的iOS浏览器打开网页时，页面排版异常是由于系统自动识别并包装电话号码为a标签。可通过在<head>中添加<metaname=format-detectioncontent=telephone=no>来禁止此行为，或者在CSS中针对电话号码的a标签添加特定样式进行处理。
摘要由CSDN通过智能技术生成

网站上线后，发现微信、安卓手机端都显示正常，但是用iphone的iOS浏览器打开，页面排版会发生变化，多番验证发现是iOS会自动识别电话号码，然后给电话号码加上a标签。
解决该问题只需在head标签中添加如下代码即可解决。

<meta name = "format-detection" content = "telephone=no">

或者在css里面加上给电话下的a标签添加对应的样式。

顾一魏
关注
手机端html回弹,处理iOS微信H5页面橡皮回弹效果
weixin_42149145的博客
07-20 1657
????业务需求近期开发的项目有一部分是与微信公众号相关的H5页面，在Android端微信上页面效果展示无异常，但是在 iOS端 微信多多少少会出现一些意想不到的bug。此次主要针对移动端H5页面在iOS端产生的 橡皮回弹(橡皮筋效果)问题做一下相关记录，希望对遇到类似问题的同学有所帮助。????方案一：使用 inobounce.jsinobounce.js github地址在 html主页面 的 head...
ios手机在app中调试h5页面
haosicx的博客
03-12 2448
网页开发在浏览器里调试很方便，但是在移动端开发调试，例如需要在app中打开，会用到一些bridge , 这时候就不能在浏览器调试。在app调试，如果每次都要发布到测试环境才能调试，那就会浪费很多时间。
vue 返回上一页,页面样式错乱的解决
12-13
vue项目，返回上一个，页面样式错乱，就是页面之间的样式干扰了，虽然vue 是单页面开发，但是如果不注意样式并不是说写在哪个页面上就是哪个页面的样式，想要页面样式不冲突，一定要在最外面添加class或者id用来区分 以上这篇vue 返回上一页,页面样式错乱的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
详解h5页面在不同ios设备上的问题总结
12-13
最近在写嵌入到小程序webview的一个h5页面，是一个文章评论的功能，这个过程中，遇到很多兼容性的问题，在不同机型上的表现也很不一致，所以总结了以下这些问题，记录下来，以便以后查看 1、日期问题 对于yyyy-mm-dd hh:mm:ss 这种格式在ios系统不识别 时间格式化的时候，在浏览器端处理好好的，到了手机端，就变成NAN，或者null，这种情况，是ios系统不能转化这种类型的时间。 let date = new Date('2019-02-28 18:33:24'); // null` 解决方案是，转成 yyyy/mm/dd hh:mm:ss 这种格式就可以了   rep
h5在ios显示不全的原因
最新发布
weixin_33488806的博客
08-04 195
H5在iOS上显示不全的原因及解决方案 随着移动互联网的发展，H5（HTML5）技术在各种平台上的应用越来越广泛。然而，开发者在将H5页面在iOS设备上呈现时，经常会遇到页面显示不全的问题。这不仅影响用户体验，也可能影响到网站的访问量。本文将探讨H5在iOS上显示不全的常见原因，并提供相应的解决方案。 常见原因 1. 视口...
h5 ios 样式错乱
pspxuan的博客
01-05 1194
1. 问题 app 内嵌 h5 IOS 中显示错误， 如下 2. 解决 后来发现 ios 对 flex 或者 gird 布局不友好，换成 float 完美解决
H5———IOS安卓微信中显示样式不同、IOS点击无反应
weixin_45629623的博客
04-26 1560
样式问题 两个系统在微信浏览器中显示不同，主要原因是两者默认样式标准不同，当你没有指定样式的时候，他就会以默认样式呈现。所以一般你在PC浏览器看到的会和手机上看到的不一样。 例子：比如color你没指定、font-size没指定，button标签的边框有时候指定了还是会变的，所以用div会比较好。 IOS点击无反应 IOS那边是需要指定css那个小手样式才能点击的。（但不是全部都无法点击，只是无法点击的部分设置这个就可以正常点击了，我也不懂，希望评论区大佬指教，我当时是div绑定的点击事件） 修改鼠标性状
解决h5页面按钮样式在ios样式不一样问题
cainiaohhhh的博客
06-25 1440
input, button { appearance: none; -moz-appearance: none; -webkit-appearance: none; } 加这些样式即可
苹果浏览器按钮样式问题
zhangwenjie1105的专栏
04-29 830
input{ -webkit-appearance: none; }
手机端html5网页音乐播放,js实现移动端H5页面音乐播放，兼容微信 safari浏览器...
weixin_32944341的博客
06-03 915
js代码：//音乐function music(){var oMusic=document.getElementById("music");var Audio=document.getElementsByTagName("audio")[0];Audio.addEventListener("ended",function(event){oMusic.setAttribute("src","//pi...
H5网页在浏览器中唤起app怎么实现？
weixin_49403297的博客
08-04 2344
借助Deeplink，实现从H5快速跳转到App 在移动端，Deeplink可以实现从H5页面直接跳到App指定页面的功能。比如你可以把一个H5页面在应用程序中分享给微信朋友，好友点击此链接就可以直接打开相应的App详细信息，而非App首页。如果朋友没有下载App，那么将跳转到App下载页面，并且在安装启动之后仍然可以跳转到App指定的页面。这可以极大地缩短用户的使用路径，降低用户的流失率。所以Deeplink的功能被广泛应用于众多的行业应用场景中，所以Deeplink的功能被广泛应用于众多的行业应用场景中
iOS和android h5字体差异,关于移动hybrid开发中H5页面的字体应与系统保持一致的问题...
weixin_27310985的博客
05-26 1432
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？0、问题来源在移动hybrid开发，也就是说，部分页面会使用html+css+javascript技术来制作，例如个人中心，收藏页面等。一般来说，移动端都会将字体设置为system系统默认类型。起初，愚钝的我认为，只要在css里不设置任何字体，将会默认使用系统默认字体。然而结果并未如我所想，页面出来后，中文、英文和数字几...
H5项目在ios 系统版本12.0中打不开的情况
insist_life的博客
11-24 1204
背景：最近做了一个H5项目，主要是vue3+vite等技术栈来写的；3、知道了可能是某些高阶语法在ios12中不兼容，那当时就想着把没有babel成功的语法手动降成es5的，但是全局检索发现这些语法都不是开发者中的代码，而是官方的写法，我担心我的水平不够，改了一处导致整个项目崩掉，索性就放弃了这个写法；2、在工具引入后，在测试环境中，我们发现控制台中没有报任何错误，然后就去看看network中的静态资源加载，发现有几个js、css文件资源没有加载，然后又在百度、CSDN上转了半天，找到一篇博主写的文章。
h5 页面 ios 回退后 页面样式不刷新（动态点击样式不起作用）
weixin_45000761的博客
04-30 990
ios11 以上，我们有时候会遇到这个问题，我们的页面跳转到别的网站或新域名，或者其他类似操作，当点击浏览器自带的返回按钮，我们页面的样式没刷新，设置动态样式也不成功。此时有两种解决办法： 1.window.srcoll(0,-1) 点击更换样式失效，或者其他操作赋值动态样式，我们发现只要滑动下页面，样式就会改变。那么在时间出发更改dom样式的时候，自动出发滚动条，完成样式更改。 2.业务上添加如...
h5页面在不同ios设备上的问题总结
油墨香^-^的博客
06-23 415
最近在写嵌入到小程序webview的一个h5页面，是一个文章评论的功能，这个过程中，遇到很多兼容性的问题，在不同机型上的表现也很不一致，所以总结了以下这些问题，记录下来，以便以后查看 1、日期问题 对于yyyy-mm-dd hh:mm:ss 这种格式在ios系统不识别 时间格式化的时候，在浏览器端处理好好的，到了手机端，就变成NAN，或者null，这种情况，是ios系统不能转化这种类型的时间。 `let date = new Date('2019-02-28 18:33:24'); //
(css)项目打包部署上线后css样式错乱
nyf_unknow的博客
06-16 763
(CSS)项目打包部署上线后css样式错乱
关于html5与jsp页面同样的html代码展示的页面效果不一样的问题
热门推荐
尼乐
06-19 1万+
html5默认的声明为jsp默认的声明头部为 这里就不一样了，如果两个页面写同样的html代码及样式，jsp页面展示的效果会跟html5页面不一样，这时只要在jsp页面的声明改为下面即可
h5制作的安卓版手机和苹果手机打开排版不同怎么办_今天才知道，苹果手机按下这个键，10秒就能生成照片视频...
weixin_39628498的博客
01-15 816
我们每个人的相册中，都有不少的照片。如果想要把这些照片做成个人视频的话，应该怎么办呢？其实，在苹果手机中，就有一个“照片视频”的功能，只需要简单操作一下，就能把照片做成小视频。如果你也对这个功能感兴趣的话，可以一起来看看。​苹果手机制作照片视频：(1)：先用iPhone手机打开相册，然后点击左上角的“+”号，再选择“新建相簿”，然后输入相册名称，点击“存储”。​(2)：相册建好了之后，选择好照片添...
iOS端样式错位
weixin_30924239的博客
06-20 484
在iOS端上点击的时候触发点会在当前元素上方，原因是在最外层使用了fixed定位，换成绝对或相对定位解决问题 转载于:https://www.cnblogs.com/zouwangblog/p/11056863.html...
h5 中 修改select箭头样式
05-27
HTML5 中修改 select 箭头样式的方法和 HTML4.01 的方法基本相同，可以通过 CSS 来实现。 ```css /* 隐藏默认的下拉箭头 */ select::-ms-expand, select::-webkit-inner-spin-button, select::-webkit-outer-spin-button { display: none; } /* 使用自定义的箭头图片 */ select { background-image: url("path/to/custom-arrow.png"); background-repeat: no-repeat; background-position: right center; background-size: 16px 16px; } ``` 以上代码将默认的下拉箭头隐藏，并使用自定义的箭头图片。需要注意的是，不同浏览器的实现可能会有差异。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值