search

LazyFE / Task

2016年春季百度前端学院
1 stars 2 forks source link

学习过程中遇到的疑问和笔记 #13

Open Emily90 opened 8 years ago

Emily90 commented 8 years ago

手机/移动前端开发需要注意的20个要点

9、如何去除iOS和Android中的输入URL的控件条

你的老板或者PD或者交互设计师可能会要求你：能否让我们的webapp更加像nativeapp，我不想让用户看见那个输入url的控件条？

答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果

setTimeout(scrollTo,0,0,0);

请注意，这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。

13、iOS中如何彻底禁止用户在新窗口打开页面

有时我们可能需要禁止用户在新窗口打开页面，我们可以使用a标签的target=”_self“来指定用户在新窗口打开，或者target属性保持空，但是你会发现iOS的用户在这个链接的上方长按3秒钟后，iOS会弹出一个列表按钮，用户通过这些按钮仍然可以在新窗口打开页面，这样的话，开发者指定的target属性就失效了，但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技巧仅适用iOS对于Android平台则无效。

14、iOS中如何禁止用户保存图片＼复制图片

我们在第13条技巧中提到元素的-webkit-touch-callout属性，同样为一个img标签指定-webkit-touch-callout为none也会禁止设备弹出列表按钮，这样用户就无法保存＼复制你的图片了。

18、如何解决Android 2.0以下平台中圆角的问题

如果大家够细心的话，在做wap站点开发时，大家应该会发现android 2.0以下的平台中问题特别的多，比如说边框圆角这个问题吧。

在对一个元素定义圆角时，为完全兼容android 2.0以下的平台，我们必须要按照以下技巧来定义边框圆角：

1＼-webkit这个前缀必须要加上（在iOS中，你可以不加，但android中一定要加）；

2＼如果对针对边框做样式定义，比如border:1px solid #000;那么-webkit-border-radius这属性必须要出现在border属性后。

3＼假如我们有这样的视觉元素，左上角和右上角是圆角时，我们必须要先定义全局的(4个角的圆角值)-webkit-border-radius:5px;然后再依次的覆盖左下角和右下角，-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-border:0;否则在android 2.0以下的平台中将全部显示直角，还有记住！-webkit这个前缀一定要加上！

20、如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式

新的iOS系统也就是4.3版本，升级后对safari造成了一个bug：即使你添加了如下的meta标签，safari仍然会对页面中的5位连续的数字进行自动识别，并且将其重新渲染样式，也就是说你的css对该标签是无效的。

<meta name="format-detection" content="telphone=no" />

我们可以用一个比较龌龊的办法来解决。比如说支付宝wap站点中显示金额的标签，我们都做了如下改写：

<button class="t-balance"style="background:none;padding:0;border:0;">95009.00</button>元
Emily90 commented 6 years ago

margin 负值

http://www.iyunlu.com/view/css-xhtml/52.html

Emily90 commented 6 years ago

移动端设备兼容性问题

https://github.com/AlloyTeam/Mars/tree/master/issues

Emily90 commented 6 years ago

移动端页面性能相关的文章

http://alloyteam.github.io/Spirit/modules/Standard/#performance

Emily90 commented 6 years ago

Vue 学习资料

  1. 官网
  2. 基础视频
  3. 中级视频(慕课网)
  4. 实践项目

Express 学习资料

Emily90 commented 6 years ago

2016-2017 技术学习趋势及选型的思维导图

Emily90 commented 6 years ago

有关垂直居中笔记

图片与文字(作为行内元素)：vertical-align:middle

//  html code
<div >
    <img src="http://p3.music.126.net/H3sDNQLV3xymVQt5CYXXaw==/528865131917655.jpg?param=140y140"<a href="">找回密码</a>
</div>
// css code
img {vertical-align:middle;}

图片与文字（作为块元素(inline-block)）

// html code
<div class="divs">
    <div class="imgs"><img src="g" alt=""></div>
    <div class="infos"><a href="">找回密码</a></div>
</div>
// css code
.divs .imgs{
    display: inline-block;
    vertical-align: middle;
}
.divs .infos{
    display: inline-block;
}

将图片作为背景图片

//  html code
<div class="haokan">
    <a href="">找回密码</a>
</div>
// code code
.haokan{
    width: 300px;
    height: 50px;
    line-height: 50px;
    background-color: red;
    background: url() no-repeat left center;

}
.haokan a{
        display: block;
        margin-left: 116px;
    }

图标/表单

//  html code 
// 未对齐
<span class="icon middle"></span>   
Centered?
//  对齐
<span class="icon middle"></span>
<span class="middle">Centered!</span>

//  css code
.icon   { display: inline-block;
         }

.middle { vertical-align: middle; }

关于display:inline-block 垂直居中

display:inline-block 垂直居中在线演示

Emily90 commented 6 years ago

幻灯片

html 写法

<div id="slider" class="swipe">
  <div class="swipe-wrap">
    <div><img src="src/images/home_images.png"></div>
    <div><img src="src/images/home_images.png"></div>
    <div><img src="src/images/home_images.png"></div>
  </div>
  <ul id="js_dot" class="swipe-dot">
    <li class="cur"></li>
    <li></li>
    <li></li>
  </ul>
</div>

jade 写法

.swipe#slider
  .swipe-wrap
    div
      img(src="src/images/home_images.png")
    div
      img(src="src/images/home_images.png")
    div
      img(src="src/images/home_images.png")
  ul.swipe-dot#js_dot
    li.cur
    li
    li

sass 写法

.swipe {
  overflow: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float: left;
  width: 100%;
  position: relative;

  img {
    width: 100%;
  }
}
.swipe {
  height: pr(375); // 可配置
}
.swipe-dot {
  position: absolute;
  bottom: pr(20);
  left: 50%;
  transform: translate3d(-50%, -50%, 0);

  z-index: 99;
  height: pr(14);
  line-height: 1;
  @extend %clearfix;

  li {
    border-radius: 50%;
    content: "";
    width: pr(16);
    height: pr(16);
    background-color: #c4c3c7;
    float: left;
    margin-right: pr(12);

    &.cur {
      background-color: #f24475;
    }
  }
}

javascript写法

  var $nav = $("#js_dot");

  window.mySwipe = new Swipe(document.getElementById('slider'), {
    startSlide: 0,
    speed: 400,
    auto: 3000,
    continuous: true,
    disableScroll: false,
    stopPropagation: false,
    callback: function(index, elem) {
      $nav.find('li').removeClass('cur');
      $nav.find('li').eq(index).addClass('cur');
    },
    transitionEnd: function(index, elem) {}
  });
Emily90 commented 6 years ago

sass的语法规范插件

atom 插件：https://github.com/AtomLinter/linter-stylelint sublime 插件：https://github.com/kungfusheep/SublimeLinter-contrib-stylelint

Emily90 commented 6 years ago

微信小程序

1. image 标签 src 引用图片格式不能使用 base 64

开发工具中显示正常，手机预览不显示， base 64 的图片可以用作样式图的背景引入。

2. console.dir() 不支持

开发工具中支持，手机端 vconsole中不支持，仅支持 console.log

3. wx.removeStorageSync(KEY) 使用必须加 try catch

开发工具中正常， 手机端会弹窗报错，停止运行