如何让我的按钮在所有媒体设备上正确显示?

Posted

技术标签:

【中文标题】如何让我的按钮在所有媒体设备上正确显示?【英文标题】:How can I make my button display correctly on all media devices? 【发布时间】:2015-05-17 20:13:43 【问题描述】:

我的网站与移动网站的主题不同。

它们共享相同的内容和插件,但主题不同。

我的移动网站上有 3 个按钮,仅在某些手机上显示清晰。

当我在另一部手机上打开网站时,有时按钮看起来像被砸在一起,几乎就像没有链接到它们的 css

为什么在某些手机上会发生这种情况,idk.....

按钮显示“搜索工作”“雇主”“候选人”

这是什么情况,请帮忙

https://hughesjobs.net

【问题讨论】:

您的网站中有媒体 css 吗? 请看一下并发送您看到的按钮的屏幕截图...我将在顶部发布网址 【参考方案1】:

不同的手机有不同的操作系统和(很可能)不同的网络浏览器。每个浏览器都嵌入了非常独特的默认 css 文件。如果你没有完全指定你的 css,那么浏览器将“回退”到它自己唯一的默认 css 文件(至少关于未定义的 css 属性)。

这在 Iphone、Ipad 等设备上经常发生。

移动设备(再次)拥有自己的 css 属性。

您的问题是关于按钮的一致设计。 答案是:在不同设备上进行调试,并且 100% 了解所有 CSS 属性。

BR

更新:

根据您的代码,这种详细的 css 样式应该使您的按钮在不同的浏览器中看起来相同:

.containerm button 
    padding: 5px;
    margin: 5px;
    width: 100px;
    height: 36px;
    background-color: #BBB;
    color: white;
    font-size: 14px;

【讨论】:

通过查看我的网址,你能确定这个...我刚才在这个问题中输入了我的网址。 是的,您的网站绝对是这样。在我的 Iphone6 上,您的按钮看起来是 100% 全宽并且非常紧密地堆叠在一起。 您可能希望使用您的标准来处理以下属性:宽度、高度、填充和边距。这对您有帮助吗?如果现在一切都清楚,请告诉我并投票赞成我的答案。 :) 你能说得更准确点吗? 更新了我的答案。请更新您的代码并重新尝试使用不同的设备访问。让我知道你的状态。 br

以上是关于如何让我的按钮在所有媒体设备上正确显示?的主要内容,如果未能解决你的问题,请参考以下文章

使用媒体查询在移动设备上隐藏引导工具提示

WordPress - 将按钮添加到标题区域

可以连接打印机的设备的媒体查询

Expo - 如何通过 httpLink 在 Android 设备上创建与 GraphQL 的数据库连接

如何在所有设备上创建 Chromecast 应用?

Jquery:下拉菜单在移动设备上无法正常工作