前端页面制作经验之——苹果手机与input框

最近在做前端的页面的时候有些感悟，为了战胜拖延症，今天特意来开个头，万事开头难嘛，进行下去总会有成果的~
刚开始做前端页面尤其是手机端页面的宝宝们肯定对这个苹果手机多多少少是有点意见的，下面我就来分享一下至今为止我遇到的在苹果手机上面的显示问题。我了避免浪费大家时间，先让我来介绍一本文的架构吧

文章会分为以下几个部分

1. 苹果手机的禁止缩放方法（起因是input框，苹果手机点击input框会自动放大页面，以至于页面上出现滚动条）

2.苹果手机自带浏览器对input框添加样式，影响页面的呈现效果

3.在苹果手机上面，如果需要在input框之前添加一些符号，譬如#，或者*等的特殊符号，你会发现这个特殊符号很难和input框处于一个水平线上（在苹果手机上面）

接下来看看问题的解决方法吧~

苹果手机之禁止缩放

只需要一条meta属性即可实现

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover">

苹果手机之去除浏览器自带的input 框样式 亲测有效

input {
        -webkit-appearance: none;
        background-color: transparent;
 }

苹果手机样式之——实现特殊符号和input框内容的对齐问题

对于这个问题，在我遇到之前，也觉得这个不能是个问题，但是经过多次测试才找到，原来一个看起来这个不起眼的小问题，真的有时候会噎死人呀~话不多说，我们开始吧
这个问题，对于我来讲，目前只有一个解决办法——使用flex布局，这个布局非常好用，只要懂得远原理，基本上做手机端的页面没有什么问题，下来我们来看一下代码吧~

<div class="flex flex-align-center" id="item">
	<div class="flex-1 flex flex-align-center login_form_box">
       	<div class="icon1_box"><i class="icon_1 icon_1_gh"></i></div>
        <div class="flex-1 flex">
            <p class="login_form_p">#</p>
            <input type="text" class="flex-1 login_form_ipt" id="" placeholder="请输入型号" onfocus="this.placeholder=''" onblur="this.placeholder='请输入型号'" value="">
        </div>
    </div>
    <div class="login_form_item_tips">
        <p class="lfit_p">（号杆）</p>
    </div>
 </div>

首先声明一下，这段代码并不是我原创的，是借鉴一个让我从内心来讲很尊敬很感激的一位同事的代码，正是有了他的帮助，我才不至于那么艰难，跑题了跑题了，我们言归正传。如果这段代码你不需要看下面的css样式就能自己写出一个demo来的话，那你真的就很厉害了。一起来看看这段css代码吧~

  *{
      padding: 0;
      margin: 0;
  }
  html {
      background-color: rgb(42, 16, 103);
  }
  input {
      background-color: transparent;
      /*兼容苹果手机的样式，上面提到过了*/
      -webkit-appearance: none;
      background-color: transparent;
  }
  input::-webkit-input-placeholder{ /*WebKit browsers*/
      color: #fff;
  }
  input::-moz-input-placeholder{ /*Mozilla Firefox*/
      color: #fff;
  }
  input::-ms-input-placeholder{ /*Internet Explorer*/ 
      color: #fff;
  }
  #item {
      width: 80%;
      height: 50px;
      margin: 200px auto;
  }
  .flex-align-center {
      -webkit-box-align: center;
      display: flex!important;
      align-items: center;
  }
  .login_form_box:first-child {
      border: solid 1px #fff;
      border-radius: 22px;
  }
  .icon1_box {
      position: relative;
      width: 40px;
      height: 40px;
  }
  .icon_1 {
      width: 10.6666667vw;
      height: 10.6666667vw;
      margin: -5.33333333vw;
      background-image: url(./img/newicon.png);
      -webkit-background-size: 53.33333333vw 74.6666667vw;
      background-size: 50px;
      background-position: -10px -515px;
      position: absolute;
      top: 50%;
      right: 40%;
  }
  .flex-1 {
      -webkit-box-flex: 1;
      flex: 1;
  }
  .flex {
      flex: 1;
      display: flex!important;
  }
  .login_form_p {
      color: #fff;
  }
  .login_form_ipt {
      font-size: 13px;
      color: #fff;
      width: 0;
      padding: 0 12px 0 0;
      /*box-sizing: border-box;
      margin: 0;*/
      outline: none;
      border: 0;
      border-radius: 0;
  }
  
  .login_form_item_tips {
      box-sizing: border-box;
      width: 80px;
  }
  .lfit_p {
      font-size: 13px;
      color: #e9e8e8;
      text-align: right;
  }

这是一段不太成熟的代码，希望有其他想法的宝宝们可以在评论区里面留言，随时欢迎大家对这篇文章进行指点，快去试试吧~~~~