Question

我正在为freeCodeCamp项目创建一个计算器，我已经完成了所有功能并在我的桌面上正确显示，但当我在iPhone上加载页面时，除了实际按钮外，所有内容都显示出来。我正在使用CSS网格进行按钮布局，所以我不确定是否需要添加一些CSS来实现移动兼容性。当我搜索时，我不断看到添加-webkit-appearance：none; -moz-appearance：none;到CSS，但这不起作用。作为一个小小的一面，我无法弄清楚为什么按钮的字体不会改变。任何和所有的帮助非常感谢。谢谢。

codepen链接：https://codepen.io/rorschach1234/pen/gxbbgg

HTML：

<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>
  <div class="container">
    <h2 class="top">Electronic Calculator</h2>
    <div class="display">
      <h2 class="displayScreen">0</h2><p class="under">0</p>
    </div>
    <div class="buttons">
    </div>  
  </div>
</body>
</html>

CSS：

$calc-font: 'Orbitron';

body {
  background: #cdc9c9;
}

.container {
  height: 450px;
  width: 300px;
  margin-top: 5%;
  margin-left: auto;
  margin-right: auto;
  background: #3250ab;
  border: 1px solid #2b4490;
  border-radius: 10px;
  box-shadow: 6px 10px 10px #3d3a38, -3px -3px 10px #3d3a38 ,inset -10px -10px 10px -10px #000000, inset 7px 5px 10px -10px #000000;
  padding-bottom: 10px;
}

.top { 
  font-family: $calc-font;
  text-align: center;
  padding-top: 5px;
}

.display {
  margin: auto 5%;
  background: #a8cda8;
  text-align: right;
  font-family: $calc-font;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #98bf98;
}

.displayScreen {
  margin-bottom: 0;
  font-size: 2em;
}

.under {
  margin-top: 0;
}

.buttons {
  margin: 0 5%;
  padding-bottom: 3%;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 40px);
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  grid-template-areas: 
    "clearall clearD divide multiply"
    "seven eight nine minus"
    "four five six add"
    "one two three equals"
    "zero zero period equals";    
}

button {
  cursor: pointer;
  font-family: $calc-font;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: linear-gradient(to bottom right,#202123, #414245) ;
  color: white;
  outline: none;
  border-radius: 10px;
  box-shadow: 0 4px #999, inset -5px -10px 10px -10px #000000;
}

button:active {
  font-family: $calc-font;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: 0 2px #666;
  transform: translateY(2px);
}

.clearall, .clearD {
  background: #a00b0b;
  color: white;
}

创建按钮的Javascript：

$(document).ready(function() {
  var btnClasses = ["clearall", "clearD", "divide", "multiply", "seven", "eight", "nine", "minus", "four", "five", "six", "add", "one", "two", "three", "equals", "zero", "period"];

  var buttons = ["AC", "CE", "&divide;", "&times;", 7, 8, 9, "-", 4, 5, 6, "+", 1, 2, 3, "=", 0, "."];

  function createButtons() {
    for (var i = 0; i<btnClasses.length; i++) {
      $(".buttons").append("<button class=\"" + btnClasses[i] + "\">" + buttons[i] + "</button>");
      $("." + btnClasses[i]).css("grid-area", btnClasses[i]);
      $("." + btnClasses[i]).css("font-family", "Orbiton");                          
    };
};


  createButtons();

iPhone上没有显示的按钮

0 个答案: