html - (html+css) 手机上的电话按钮分成两行,我怎样才能让它响应?
问题描述
我正在尝试使电话按钮在移动设备上响应。
在我浏览器的开发人员工具中,每个手机屏幕分辨率的一切似乎都很好,但是当我从手机访问该网站时,电话号码被分成 2 行,而不是在一个框中设置一行。
例子
html
<a href="tel:+972504751410" class="call call1" id="call call1"> 050-475-1410 </a>
CSS:
* {
margin: 0;
padding: 0;
}
body {
overflow: scroll;
margin: 0;
font-size: 17px;
color: black;
line-height: 1.4;
}
@media only screen and (max-width: 2000px) {
.call {
/*Your styles on small screen - example only*/
width: 200px;
font-size: 30px;
.span{display: inline;}
}
}
@media only screen and (max-width: 600px) {
.call {
/*Your styles on small screen - example only*/
width: 150px;
font-size: 25px;
.span{display: inline;}
}
}
@media only screen and (max-width: 370px) {
.call {
/*Your styles on small screen - example only*/
width: 125px;
font-size: 20px;
.span{display: inline;}
}
}
@media only screen and (max-width: 330px) {
.call {
/*Your styles on small screen - example only*/
width: 120px;
font-size: 20px;
.span{display: inline;}
}
}
.call {
color: #2c3e50;
background: none;
border: 1px solid #2c3e50;
text-align: center ;
padding: 10px, 20px;
margin: 5px;
font-family: font1;
text-decoration: none;
position: relative;
cursor: pointer;
top: 2px;
}
解决方案
推荐阅读
- swift - 收到“无效的 Sec-WebSocket-Accept 响应”以连接到 Web 套接字
- ios - 不了解导致 StoreKit SKErrors 的原因
- unity3d - Unity:在专用服务器上通过网络进行旋转同步
- firebase - 如何使用 Firebase 云功能从右到左发送电子邮件
- c# - C# 混合两个列表
- python - ValueError: x and y must have same first dimension 抛出异常,但 x 和 y 的类型和长度相同
- django - Django Order_by 不在 FloatField 上工作
- tensorflow - Tensoflow CPU:分配超过系统内存的 10%
- javascript - ErrorAccessDenied 使用 microsoft graph 删除附件
- asp.net-core - NPOI直接将excel导出到前端而不保存在服务器上