iPad 上的 div box-shadow

Posted 2023-03-12

【中文标题】iPad 上的 div box-shadow

【英文标题】：div box-shadow on iPad

【发布时间】：2014-05-05 06:17:49

【问题描述】：

我目前正在开发一个触摸优化的网络应用程序。部分概念设计包括易于导航，所以我设计了一些漂亮的 div，它们有一个“点击”或“触摸”事件，当你触摸它时看起来很漂亮。

这在计算机网络浏览器和安卓浏览器上效果很好，但是当我在 iPad 上的 Safari 上使用它时，它不会显示阴影。我所有的语法似乎都是正确的，所以我只能得出结论是它是一个错误或不受支持。

我的问题是：有没有人遇到过这个问题并发现了修复或解决方法？

jsFiddle

CSS：

div.touch-button:active 
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;


div.touch-button 
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);

【参考方案1】：

你应该在 -moz-box-shadow 和 -webkit-box-shadow 之前使用 box shadow。 这在过去为我解决了同样的问题。

div.touch-button 
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;    
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);

【讨论】：

抱歉，好像没有用。似乎有一个轻微的阴影（大约 1px），我必须眯着眼睛才能看到它。增加阴影似乎也无法解决问题。

【参考方案2】：

使用-webkit-appearance：无；对于覆盖默认值，试试这个..

div.touch-button 
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    -webkit-appearance: none;
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);


div.touch-button:active 
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    -webkit-appearance: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;

【参考方案3】：

好的， 在经历了很大的压力和混乱之后，放弃了。我在尝试解决另一个问题时遇到了这个问题。

这与视口设置有关。

不正确： <meta name="viewport" content="width=device-width" />

正确： <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

【讨论】：

您的问题与 safari 上未出现框阴影有关，您在此处更改的内容将禁用缩放并将其保持为设计的原始大小。

Rider 是对的。你可能想试试这个：<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">。我在尝试解决缩放问题时发现了这个解决方法。它没有，但它确实在我的代码中解决了横向视图中的 ios 盒子阴影问题。