40个前端解决移动端web页面问题的必备小技巧(中)

发表于:2021-10-15 09:27  作者:小小切图仔_可笑可笑   来源:掘金

字体: | 上一篇 | 下一篇 |我要投稿 | 推荐标签: 面试技巧 web页面

  16、Retina屏的1px边框
  Element{
    border-width: thin;
  }
  17、webkit mask 兼容处理
  某些低端手机不支持css3 mask,可以选择性的降级处理。
  比如可以使用js判断来引用不同class:
  if( 'WebkitMask' in document.documentElement.style){
    alert('支持mask');
  } else {
    alert('不支持mask');
  }
  18、旋转屏幕时,字体大小调整的问题
  html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:100%;
  }
  19、transition闪屏
  /设置内嵌的元素在 3D 空间如何呈现:保留3D /
   
  -webkit-transform-style: preserve-3d;
  / 设置进行转换的元素的背面在面对用户时是否可见:隐藏 /
   
  -webkit-backface-visibility:hidden;
  20、圆角bug
  某些Android手机圆角失效
  background-clip: padding-box;
  21、顶部状态栏背景色
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  说明:
  除非你先使用apple-mobile-web-app-capable指定全屏模式,否则这个meta标签不会起任何作用。
  如果content设置为default,则状态栏正常显示。如果设置为blank,则状态栏会有一个黑色的背景。如果设置为blank-translucent,则状态栏显示为黑色半透明。如果设置为default或blank,则页面显示在状态栏的下方,即状态栏占据上方部分,页面占据下方部分,二者没有遮挡对方或被遮挡。如果设置为blank-translucent,则页面会充满屏幕,其中页面顶部会被状态栏遮盖住(会覆盖页面20px高度,而iphone4和itouch4的Retina屏幕为40px)。默认值是default。
  22、设置缓存
  <meta http-equiv="Cache-Control" content="no-cache" />
  手机页面通常在第一次加载后会进行缓存,然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。
  23、桌面图标
  <link rel="apple-touch-icon" href="touch-icon-iphone.png" />
  <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />
  <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />
  <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />
  iOS下针对不同设备定义不同的桌面图标。如果不定义则以当前屏幕截图作为图标。
  上面的写法可能大家会觉得会有默认光泽,下面这种设置方法可以去掉光泽效果,还原设计图的效果!
  <link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
  图片尺寸可以设定为5757(px)或者Retina可以定为114114(px),ipad尺寸为72*72(px)
  24、启动画面
  <link rel="apple-touch-startup-image" href="start.png"/>
  iOS下页面启动加载时显示的画面图片,避免加载时的白屏。
  可以通过madia来指定不同的大小:
  <!--iPhone-->
  <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
   
  <!-- iPhone Retina -->
  <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
   
  <!-- iPhone 5 -->
  <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
   
  <!-- iPad portrait -->
  <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />
   
  <!-- iPad landscape -->
  <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />
   
  <!-- iPad Retina portrait -->
  <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
   
  <!-- iPad Retina landscape -->
  <link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />
  25、浏览器私有及其它meta
  以下属性在项目中没有应用过,可以写一个demo测试以下!
  QQ浏览器私有
  全屏模式
  <meta name="x5-fullscreen" content="true">
  强制竖屏
  <meta name="x5-orientation" content="portrait">
  强制横屏
  <meta name="x5-orientation" content="landscape"> 
  应用模式
  <meta name="x5-page-mode" content="app">
  UC浏览器私有
  全屏模式
  <meta name="full-screen" content="yes">
  强制竖屏
  <meta name="screen-orientation" content="portrait">
  强制横屏
  <meta name="screen-orientation" content="landscape">
  应用模式
  <meta name="browsermode" content="application">
  其它
  针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓
  <meta name="HandheldFriendly" content="true">
  微软的老式浏览器
  <meta name="MobileOptimized" content="320">
  windows phone 点击无高光
  <meta name="msapplication-tap-highlight" content="no">
  26、 IOS中input键盘事件keyup、keydown、keypress支持不是很好
  问题是这样的,用input search做模糊搜索的时候,在键盘里面输入关键词,会通过ajax后台查询,然后返回数据,然后再对返回的数据进行关键词标红。用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中变红很慢,用输入法输入之后,并未立刻相应keyup事件,只有在通过删除之后才能相应!
  解决办法:
  可以用html5的oninput事件去代替keyup
  <input type="text" id="testInput">
  <script type="text/javascript">
    document.getElementById('testInput').addEventListener('input', function(e){
      var value = e.target.value;
    });
  </script>
  然后就达到类似keyup的效果!
  27、h5网站input 设置为type=number的问题
  h5网页input 的type设置为number一般会产生三个问题,一个问题是maxlength属性不好用了。另外一个是form提交的时候,默认给取整了。三是部分安卓手机出现样式问题。
  问题一解决,我目前用的是js。如下:
  <input type="number" oninput="checkTextLength(this ,10)"> 
  <script>
  function checkTextLength(obj, length) {  
        if(obj.value.length > length)  {     
          obj.value = obj.value.substr(0, length);  
        }  
  }
  </script>
  问题二,是因为form提交默认做了表单验证,step默认是1,要设置step属性,假如保留2位小数,写法如下:
  <input type="number" step="0.01" />
  关于step,我在这里做简单的介绍,input 中type=number,一般会自动生成一个上下箭头,点击上箭头默认增加一个step,点击下箭头默认会减少一个step。number中默认step是1。也就是step=0.01,可以允许输入2位小数,并且点击上下箭头分别增加0.01和减少0.01。
  假如step和min一起使用,那么数值必须在min和max之间。
  看下面的例子:
  <input type="number" step="3.1" min="1" />
  输入框可以输入哪些数字?
  首先,最小值是1,那么可以输入1.0,第二个是可以输入(1+3.1)那就是4.1,以此类推,每次点击上下箭头都会增加或者减少3.1,输入其他数字无效。这就是step的简单介绍。
  问题三,去除input默认样式
  input[type=number] {
    -moz-appearance:textfield;
  }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  28、ios 设置input 按钮样式会被默认样式覆盖
  解决方式如下:
  input,
  textarea {
    border: 0; 
    -webkit-appearance: none; 
  }
  设置默认样式为none
  29、IOS键盘字母输入,默认首字母大写
  解决方案,设置如下属性
  <input type="text" autocapitalize="off" />
  30、select 下拉选择设置右对齐
  设置如下:
  select option {
   direction: rtl;
  }

  本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理

评 论

论坛新帖



建议使用IE 6.0以上浏览器,800×600以上分辨率,法律顾问:上海信义律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2021, 沪ICP备05003035号
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪公网安备 31010102002173号

51Testing官方微信

51Testing官方微博

扫一扫 测试知识全知道