首页 > 新闻中心> 广州校区 >正文

HTML培训过程中常见问题集锦,你在粤嵌培训时遇到过几个?

更新时间: 2017-04-05 15:07:45来源: 粤嵌教育

  今天小编要跟大家分享的是在HTML培训过程中常见问题集锦,来看看这些问题你中过几个吧!

      链接点击时有边框

  /* android、IOS 点击一个链接时 **会出现一个边框** 或者半透明灰色遮罩 */
  a,button,input,textarea {
  -webkit-tap-highlight-color: rgba(0,0,0,0;)
  -webkit-user-modify:read-write-plaintext-only;
  }
  不自动识别电话或email。
  <!-- 忽略识别号码 -->
  <meta name="format-detection" content="telephone=no">
  <!-- 忽略识别email -->
  <meta content="email=no" name="format-detection">
  移动端200-300ms的延迟响应
  <!-- 1. fastclick可以解决在手机上点击事件的300ms延迟 -->
  <!-- 2. zepto的touch模块,tap事件也是为了解决在click的延迟问题 -->
  拉动滚动条时延迟或卡顿
  /* 上下拉动滚动条时出现 __卡顿、慢__ 情况 */
  body {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;}
  禁止复制或选中文本
  Element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;}
  长时间按住页面出现闪退
  element { -webkit-touch-callout: none; }
  输入框默认内阴影
  /* iphone及ipad下输入 __框默认内阴影__ */
  element{ -webkit-appearance: none; }
  某些安卓手机圆角失效
  element{ background-clip: padding-box; }
  旋转时字体大小调整
  /* 旋转屏幕时,字体大小调整的问题 */
  html, body, p, div {
  -webkit-text-size-adjust:100%;}
  按钮样式被默认样式覆盖
  /* ios 设置input 按钮样式会被默认样式覆盖 */
  input,
  textarea {
  border: 0;
  -webkit-appearance: none;
  }
  默认首字母大写
  <!-- IOS键盘字母输入,默认首字母大写 -->
  <input type="text" autocapitalize="off" />
  行高无法垂直居中的问题
  /* line-height 在移动端的无法垂直居中的问题 */
  html{-webkit-text-size-adjust:none;}
  /* 不知道管不管用,还没试 */
  改变placeholder的字体颜色
  input::-webkit-input-placeholder{color:#AAAAAA;}
  input:focus::-webkit-input-placeholder{color:#EEEEEE;}
  禁止长按触发系统菜单
  /* 禁止ios长按时触发系统的菜单,以防 ios或者android 长按时下载该图片 */
  .css
  /* */{-webkit-touch-callout: none}
  下拉选择设右对齐
  /* select 下拉选择设置右对齐 */
  select option {
  direction: rtl;
  }
  动画定义3D硬件加速
  /* */
  element {
  -webkit-transform:translate3d(0, 0, 0)
  transform: translate3d(0, 0, 0);}
  /* 注意:3D变形会消耗更多的内存与功耗 */
  Retina屏的1px边框
  element{
  border-width: thin;}
  transition闪屏
  /* */
  {/* 设置内嵌的元素在 3D 空间如何呈现:保留3D */
  -webkit-transform-style: preserve-3d;
  /* 设置进行转换的元素的背面在面对用户时是否可见:隐藏 */
  -webkit-backface-visibility:hidden;}
  浏览器私有及其它meta
  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">
  唤起select的option展开
  /* zepto方式: */
  $(sltElement).trrgger("mousedown");
  /* 原生js方式:*/
  function showDropdown(sltElement) {
  var event;
  event = document.createEvent('MouseEvents');
  event.initMouseEvent('mousedown', true, true, window);
  sltElement.dispatchEvent(event);
  };
  判断手机的类型
  var user="";
  if (/android/i.test(navigator.userAgent)){
  //  android
  user="1";
  }
  if (/ipad|iphone|mac/i.test(navigator.userAgent)){
  //  ios
  user="0";
  }
  判断是否来自微信浏览器
  function isFromWeiXin() {
  var ua = navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
  return true;
  }
  return false;
  }
  屏幕旋转的事件
  window.onorientationchange = function(){
  switch(window.orientation){
  case -90:
  case 90:
  alert("横屏:" + window.orientation);
  case 0:
  case 180:
  alert("竖屏:" + window.orientation);
  break;
  }
  }
  屏幕旋转时如何操作
  /* */
  /* 竖屏时使用的样式 */
  @media all and (orientation:portrait) {
  .css
  /* */{}
  }
  /* 横屏时使用的样式 */
  @media all and (orientation:landscape) {
  .css
  /* */{}
  }
  video无法自动播放
  /* video无法自动播放的问题  |  应对方案:触屏即播 */
  $('html').one('touchstart',function(){
  audio.play()
  })
  手机拍照和上传图片
  <!-- 选择照片 -->
  <input type=file accept="image/*">
  <!-- 选择视频 -->
  <input type=file accept="video/*">
  输入时首字母默认大写
  <!-- 取消input在ios下,输入的时候英文首字母的默认大写 -->
  <input autocapitalize="off" autocorrect="off" />
  上去掉语音输入按钮
  /* android */

  input::-webkit-input-speech-button {display: none}

      如果在HTML培训过程中没有遇到以上问题,说不定工作中会遇到哦,添加粤嵌官网收藏吧,想了解随时能找到。

免费预约试听课

推荐阅读