开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用百分比和像素时，Calc在iOS 11.2.1 safari上不起作用

Calc是CSS中的一个函数，用于计算元素的尺寸或位置。在iOS 11.2.1 Safari浏览器上，可能会出现Calc在使用百分比和像素时不起作用的问题。

这个问题可能是由于浏览器的兼容性或Bug导致的。为了解决这个问题，可以尝试以下几种方法：

检查浏览器版本：确保iOS 11.2.1 Safari浏览器是最新版本，因为浏览器的更新通常会修复一些Bug和兼容性问题。
使用其他单位：如果Calc在使用百分比和像素时不起作用，可以尝试使用其他单位，如em、rem、vh、vw等。这些单位在不同浏览器上的兼容性较好。
使用JavaScript进行计算：如果Calc函数无法满足需求，可以考虑使用JavaScript来进行计算并设置元素的尺寸或位置。通过JavaScript，可以更灵活地进行计算，并且可以兼容各种浏览器。
提交Bug报告：如果以上方法都无法解决问题，可以考虑向苹果官方提交Bug报告，以便他们能够及时修复这个问题。

总结一下，Calc在iOS 11.2.1 Safari上不起作用可能是由于浏览器的兼容性或Bug导致的。可以尝试更新浏览器版本、使用其他单位、使用JavaScript进行计算或提交Bug报告来解决这个问题。

腾讯云相关产品和产品介绍链接地址：

腾讯云计算服务：https://cloud.tencent.com/product/cvm
腾讯云数据库服务：https://cloud.tencent.com/product/cdb
腾讯云服务器运维服务：https://cloud.tencent.com/product/cds
腾讯云音视频处理服务：https://cloud.tencent.com/product/mps
腾讯云人工智能服务：https://cloud.tencent.com/product/ai
腾讯云物联网服务：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发服务：https://cloud.tencent.com/product/mobdev
腾讯云存储服务：https://cloud.tencent.com/product/cos
腾讯云区块链服务：https://cloud.tencent.com/product/baas
腾讯云元宇宙服务：https://cloud.tencent.com/product/mu

相关搜索:CSS3 - Flex wrap在iOS10.1.1Safari和Chrome上不起作用 Websockets在iOS和Safari上不起作用- OSSStatus错误9837 使用ajax的条带化元素在firefox和safari移动设备上不起作用在Safari、iOS上使用History API后，报警、确认和提示不起作用每当DOM更新时，在Safari OSX和iOS中与指针事件属性一起使用时，CSS颜色属性不起作用移动IOS输入类型date min和max在chrome和safari上不起作用企业融资服务怎么租企业综合评估怎么租企业信用画像怎么租中小企业金融服务平台怎么租

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

能让你受益匪浅的10个css使用技巧

CSS技巧大杂烩 01 Safari 中z-index的层级问题在Safari浏览器下(此Safari浏览器包括iOS的Safari，iPhone上的微信浏览器，以及Mac OS X系统的Safari...浏览器)，当我们使用3D transform变换的时候，如果祖先元素没有overflow:hidden/scroll/auto等限制，则会直接忽略自身和其他元素的z-index层叠顺序设置，而直接使用真实世界的...例如下面的场景，图中红框里面的模块，使用 3D transform变换，进行旋转动画，但是在Safari浏览器下，忽略了二维码遮罩层的z-index,结果使用了真实世界的3D视角进行渲染。...但是在安卓下（ios正常）只有打开页面能看到的第一个a标签能正常跳转，能正常绑定事件。第二个a不能跳转，我就想那我通过点击事件来跳转可以不，结果绑定任何事件都不生效。...css中，当padding-top/bottom值为百分比时，其值都是以其父元素的宽度为参照对象。

1.6K2 0

长度单位、calc() 表达式

长度单位绝对长度单位绝对长度单位代表一个物理测量 // 像素px（pixels）：在web上，像素px是典型的度量单位，很多其他长度单位直接映射成像素。...）、em、%（百分比），要注意其实这三种单位都是相对单位像素 px 像素为什么是相对单位呢？...实际情况是与浏览器使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位 em em表示元素的font-size属性的计算值，如果用于font-size属性本身，相对于父元素的...使用calc()为页面元素布局提供了便利和新的思路数学表达式calc()是calculate计算的缩写，它允许使用+、-、*、/这四种运算符，可以混合使用%、px、em、rem等单位进行计算兼容性：...IE8-、safari5.1-、ios5.1-、android4.3-不支持，android4.4-4.4.4只支持加法和减法。

7881 0

兼容iphone x * 刘海的正确姿势

正确的姿势在 ios 11 中我们可以使用 viewport-fit=cover + safe-area-inset-*。那么是不是 ios11 以下就用不了这些了呢？...3、还有另一个考虑是，当我们设置 viewport-fit:contain，也就是默认的时候时，设置 safe-area-inset-* 等 css 属性时不起作用的。...Webkit在iOS11中新增CSS Functions: env( )替代constant( )，文档中推荐使用env( )，而 constant( ) 从Safari Techology Preview...41 和iOS11.2 Beta开始会被弃用。...在不支持env( )的浏览器中，会自动忽略这一样式规则，不影响网页正常的渲染。为了达到最大兼容目的，我们可以 constant( ) 和 env( ) 同时使用。

1.1K3 0

CSS实现背景图片右侧定位的5种小技巧

background-position属性的值既可以使用关键字，也可以是像素、em或百分比，可以指定两个值，分别表示相对于左侧的偏移量和相对于顶部的偏移量。...不过歪马建议大家不管使用什么值，都先指定 x 轴，再指定 y 轴。使用像素和em与使用百分比进行背景定位时，计算方式是不一样的。...使用像素和em时，会一直以图片的左上角相对于父元素（左侧和顶部）来计算。使用百分比时，则是以图片中对应比例的点定位到父元素对应比例的点。百分比的定位效果如下： ?...这一方法总的来说兼容性还好，只不过 IE9 在calc()和background-position结合使用的时候会导致浏览器崩溃，所以如果你要兼容 IE9，不要使用该方法。...不过我们可以通过上面的方式，在background缩写语法中，加入right center来作为后备，实现优雅降级。该方法与使用calc()一样，如果padding调整，这里也要调整。 5.

4.3K3 1

兼容iPhone X* 刘海的正确姿势

正确的姿势在 ios 11 中我们可以使用 viewport-fit=cover + safe-area-inset-*。那么是不是 ios11 以下就用不了这些了呢？...3、还有另一个考虑是，当我们设置 viewport-fit:contain，也就是默认的时候时，设置 safe-area-inset-* 等 css 属性时不起作用的。...Webkit在iOS11中新增CSS Functions: env( )替代constant( )，文档中推荐使用env( )，而 constant( ) 从Safari Techology Preview...41 和iOS11.2 Beta开始会被弃用。...在不支持env( )的浏览器中，会自动忽略这一样式规则，不影响网页正常的渲染。为了达到最大兼容目的，我们可以 constant( ) 和 env( ) 同时使用。

6381 0

css背景图background-position百分比的理解

包括：Chrome 25+, Firefox 13+, IE 9+, Opera 10.5+, Safari/iOS 7+ ....因此，我们在实现此类效果的时候，可能还需要留一手，如下，使用calc计算： background-position: calc(100% - 40px) calc(100% -20px); ?...使用calc计算总体来说兼容性好一点，但是，IE9浏览器下，根据caniuse的说法，会让IE9浏览器奔溃。因此，实际使用还需要根据场景分别或hack处理。...例如，一个图片： img { position: absolute; left: 100%; } 一定是在父容器外部。但是，在值中，却是不一样的表现。...接近于下面CSS的效果： background-position: 40px 10px; 深受传统百分比定位迷惑的我们可能一时间会想不通，明明是个负值百分比定位，怎么会是一个正值效果呢？这不科学啊！

1.5K3 0

浏览器亚像素渲染与小数位的取舍

选取这两个值，可以测试在正常页面宽度与极限页面宽度时，浏览器的处理情况。...与百分比的取舍有点不同的是，亚像素渲染的宽度值的在取舍上存在着一定的偏差，不过偏差基本不大于0.01px。...IE8、IE9对小于1像素的部分是会进行取整处理的，因此舍弃前后的整数值是621和620，那将会出现1像素的误差。...对于IE8、IE9，我们无法避免出现1像素的误差，因此我们在设置百分比宽度或背景定位时，需能兼容1像素的误差范围。...三、结论综合以下情况，我们可以得出以下结论： 1、百分比数值只需保留3位小数即可 2、在兼容IE8、IE9的情况下，无法避免1像素的差距，因此百分比宽度或背景定位时，需能兼容1像素的误差范围。

1.4K2 0

css3中的calc()

能够通过calc()计算得到元素的宽度。 2.calc()能做什么？ calc()能让你给元素的做计算。你能够给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度。...4.calc()的运算规则 calc()使用通用的数学运算规则，可是也提供更智能的功能：使用“+”、“-”、“*” 和 “/”四则运算；能够使用百分比、px、em、rem等单位。...能够混合使用各种单位进行计算；表达式中有“+”和“-”时。其前后必需要有空格，如”widht: calc(12%+5em)”这样的没有空格的写法是错误的。...表达式中有“*”和“/”时，其前后能够没有空格，但建议留有空格。...大家在实际使用时。

4753 0

移动端web开发入门笔记

移动端web app开发简单来说就是在开发中使用一些浏览器私有的方法，使得web页面拥有一些native的功能。...layout viewport就是一个页面渲染之后具有固定大小的大框，跟之前提到PC上的概念相似，我们知道它的大小是由浏览器特性来决定的，在PC端就是等于窗口大小，但在移动端不同浏览器的值不同，比如Safari...可以看到，当缩放比例为100%时，layout viewport = visual viewport，当用户将页面放大时，显示在屏幕上的页面部分变化了，所以visual viewport变化了，而layout...="telephone=no"> 默认情况下，Safari和IOS会自动识别像手机号码的文本，这个meta标签是用来禁止这项功能的 <link rel="apple-touch-icon" href="...这时候<em>IOS</em>可以提供配置应用图标的功能<em>和</em>启动图片的功能。

1.7K9 0

移动端web开发入门笔记

移动端web app开发简单来说就是在开发中使用一些浏览器私有的方法，使得web页面拥有一些native的功能。...layout viewport就是一个页面渲染之后具有固定大小的大框，跟之前提到PC上的概念相似，我们知道它的大小是由浏览器特性来决定的，在PC端就是等于窗口大小，但在移动端不同浏览器的值不同，比如Safari...可以看到，当缩放比例为100%时，layout viewport = visual viewport，当用户将页面放大时，显示在屏幕上的页面部分变化了，所以visual viewport变化了，而layout...="telephone=no"> 默认情况下，Safari和IOS会自动识别像手机号码的文本，这个meta标签是用来禁止这项功能的 <link rel="apple-touch-icon" href="...这时候<em>IOS</em>可以提供配置应用图标的功能<em>和</em>启动图片的功能。

1.1K1 0

win8效果的横向布局

有一个月没写过博客了，自己的博客也没有看过，前段时间一直在忙着写代码，公司有一个制漆的产品，与传统纵向布局不一样，要求页面横向布局，类似win8的那种布局效果，最开始，我也没有什么头绪，然后硬着头皮做了...(100%); /*chrome safari*/ height:-webkit-calc(100%); /*Standard */ height:calc(100%); width...(100%); /*chrome safari*/ height:-webkit-calc(100%); /*Standard */ height:calc(100%);...win8横向布局：注意点： 1、flex的兼容性写法 2、inline-block的兼容性写法 3、html标签设置高度为100%时，body高度不能设置为100%，否则会出现滚动条 4、html与body...高度相差10个像素的原因是因为设置了!

2.1K3 0

css 文字自适应大小_div自适应窗口大小

viewport的)；缩小浏览器窗口，当宽度小于900时会出现滚动条，向右滚动，会发现蓝色部分并不是100%，这个问题大家可以去思考下。...vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome...for android39支持其它的单位还有： %:百分比 in:寸 cm:厘米 mm:毫米 pt:point，大约1/72寸 pc:pica，大约6pt，1/6寸 ex：取当前作用效果的字体的...x的高度，在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀...) ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4

3.2K2 0

CSS3 calc()详细介绍及使用

calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少...calc()的运算规则 calc()使用通用的数学运算规则，但是也提供更智能的功能： 1.使用“+”、“-”、“” 和 “/”四则运算； 2.可以使用百分比、px、em、rem等单位； 3.可以混合使用各种单位进行计算...； 4.表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的； 5.表达式中有“”和“/”时，其前后可以没有空格，但建议留有空格。...浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox...大家在实际使用时，同样需要添加浏览器的前缀 .elm { /*Firefox*/ -moz-calc(expression); /*chrome safari*/ -webkit-calc

1.5K1 0

你不应该依赖CSS 100vh，这就是原因!

在本文中使用的 iPhone 13（iOS 15.2）进行测试，下面是结果: 图片啥，底部按钮跑哪里去了？顺便说一下，它在安卓手机上甚至不能按预期工作。...仅使用 CSS 在移动设备上修复 100VH 问题时，使用 vh 的目的是为了简单地创建与视口高度相等的部分。例如，当你在建立登陆页面时，这很常见。...它用起来很简单，只要记住使用前缀和回退值就可以了。...Safari上的垂直 padding 问题在 min-height（或 height）为 fill-available的元素上添加垂直 padding （bottom 和 top），Safari浏览器上会导致问题...('--vh', vh + 'px'); 在 CSS 中： min-height: calc(var(--vh) * 100); 最后一件事是当窗口被调整大小或设备方向改变时，重新计算这个值: function

1.2K4 0

第135天：移动端开发经验总结

二、Box-sizing在移动端的使用　　在百分比定宽的页面经常使用。...显示屏中，像素点1个变为4个　　在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍。　　...不过我们可以通过这个meta标签来禁止它： 3、移动端手机号码识别（IOS）　　在 iOS...Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如： 7位数字，形如：1234567 带括号及加号的数字，形如：(+86)123456789 双连接线的数字...系统中元素被触摸时产生的半透明灰色遮罩怎么去掉 ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha

1.6K3 0

iOS自动化探索（三）WebDriverAgent Python Client

之前我们在终端试着调用过WDA API，今天我们在看一个Python封装的api库 https://github.com/openatx/facebook-wda 安装方式（一）: pip install...//github.com/openatx/facebook-wda.git cd facebook-wda/ python setup.py install 用Xcode开启WDA 会话，然后再编写和执行脚本.../code/iOS-Auto/Python_Client/Python_Client.py {u'ios': {u'ip': u'192.168.1.101', u'simulatorVersion':...u'11.2.1'}, u'state': u'success', u'os': {u'version': u'11.2.1', u'name': u'iOS'}, u'build': {u'time...，然后关闭 # 使用safari浏览器打开百度 s = c.session('com.apple.mobilesafari',['-u', 'http://www.baidu.com']) print

2.1K3 1

移动开发实用

在IOS safari下，大概为300毫秒。这就是延迟的由来。...{ .css{} } audio元素和video元素在ios和andriod中无法自动播放应对方案：触屏即播 $('html').one('touchstart',function(){...important;} 最好的解决方案：整个页面用rem或者百分比布局消除transition闪屏网络都是这么写的，但我并没有测试出来 .css{ /*设置内嵌的元素在 3D 空间如何呈现：...伪类无法使用动画 border-radius不支持%单位 translate百分比的写法和scale在一起会导致失效，例如-webkit-transform: translate(-50%,-50%)...bug ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位 android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位 ios4下不支持position

6.4K3 0

H5移动端开发学习总结

CSS像素:px(设备独立像素) 逻辑像素，浏览器使用的抽象单位(之所以叫抽象单位，是因为其可以根据不同的设备和不同的关系来变大变小，所以称为抽象单位)为Web开发者创造的，在CSS和JavaScript...px是相对长度单位，相对的是设备物理像素(device pixel) 注意：在旧的屏幕上，当缩放程度为100%时，一个CSS像素等于一个设备像素。...当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（33）个设备像素显示1个CSS像素。...ppi和dpi是同一个概念，Android比较喜欢使用dpi，IOS比较喜欢使用ppi。...calc，vm这些CSS3新属性，在实际应用中最好还是使用js方式。

9662 0

微信小程序布局单位的使用

如在 iPhone6 上，屏幕宽度为750 px，则共有个750 物理像素，则750 rpx = 375px = 750 物理像素例如 : 1rpx = 0.5px = 1物理像素但是不同iOS设备上...上： 1rpx = 0.552px 1px = 1.81rpx 在不同设备上rpx与px的转换是不相同的，但是宽度的rpx却是固定的，所以可以使用rpx作为单位，来设置布局的宽高，不是所有的单位都适合...rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx 在开发中, 1)....vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。...vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome

3K6 1

网页适配 iPhoneX

更详细说明，参考文档：viewport-fit-descriptor env() 和 constant() iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量...注意：当 viewport-fit=contain 时 env() 是不起作用的，必须要配合 viewport-fit=cover 使用。对于不支持env() 的浏览器，浏览器将会忽略它。...在这之前，笔者使用的是 constant()，后来，官方文档加了这么一段注释（坑）： The env() function shipped in iOS 11 with the name constant...Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced...这就意味着，之前使用的 constant() 在 iOS11.2 之后就不能使用的，但我们还是需要做向后兼容，像这样： 1 2 padding-bottom: constant(safe-area-inset-bottom

6492 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭