saber酱的抱枕

Fly me to the moon

08/24
14:35
学习

网页使用固定宽度布局,适应不同宽度的手机屏幕

今天完成了一个手机站专题的排版,然后到手机上测试缩放的时候出了问题,折腾半个上午,摸索出一些心得(后来发现,这就是固定宽度布局嘛)。

1.排版的时候用px排,在css里把body宽度固定,可以定成和设计稿一样,例如360px,640px。其他元素也都用px。

2.使用js动态设置viewport:

var scale=document.documentElement.clientWidth/640;
// var scale=window.screen.width/640;
var metaEl = document.createElement('meta');
document.querySelector("head").appendChild(metaEl);
metaEl.setAttribute('name','viewport');
metaEl.setAttribute('content', 'width=device-width ,initial-scale=' + scale + ',maximum-scale=1.0, minimum-scale=0 ,user-scalable=no');

这里面的640改成自己给body定的的宽度。这个代码的意思就是把initial-scale倍数设置为浏览器device-width/网页固定的宽度,使得页面被缩放到适应屏幕宽度。

ps:本文最近做过更新,第二步动态设置viewport,虽然理论上是正确的,但我还没实践过。我现在尝试用rem布局。

网页使用固定宽度布局,适应不同宽度的手机屏幕

06/27
07:56
学习

利用百度Site App代码使手机访问手机版网站

以前有篇文章《js判断访问网站的是pc还是移动设备》,现在有个更方便的办法,就是使用百度的Site App代码来判断是否是手机访问。

<script src="http://siteapp.baidu.com/static/webappservice/uaredirect.js" type="text/javascript"></script>
<script type="text/javascript">uaredirect("http://wap.site.com");</script>

代码需要添加到head标签之中,首先引入百度的uaredirect.js,然后使用另一个js标签来设置手机访问时重定向到的url。
但是这种方式只能设置跳转网址,不能执行其他操作,所以有其局限性。

利用百度Site App代码使手机访问手机版网站

02/17
17:25
学习

从139邮箱扒下来飘雪效果

之前我已经搜集了两种雪花飘落的效果:

第一种 雪花会飘满整个网页长度,占用资源严重,不推荐使用
第二种 雪花只飘满网页当前可视区域,即只会覆盖在当前一屏上,不太占资源。

这次找到的第三种,原理和第二种类似,代码如下:

<script>
     var snow = function() {
    if(1==1) {
      $("body").append('<canvas id="christmasCanvas" style="top: 0px; left: 0px; z-index: 5000; position: fixed; pointer-events: none;"></canvas>');
      var b = document.getElementById("christmasCanvas"), a = b.getContext("2d"), d = window.innerWidth, c = window.innerHeight;
      b.width = d;
      b.height = c;
      for(var e = [], b = 0;b < 70;b++) {
        e.push({x:Math.random() * d, y:Math.random() * c, r:Math.random() * 4 + 1, d:Math.random() * 70})
      }
      var h = 0;
      window.intervral4Christmas = setInterval(function() {
        a.clearRect(0, 0, d, c);
        a.fillStyle = "rgba(255, 255, 255, 0.6)";
        a.shadowBlur = 5;
        a.shadowColor = "rgba(255, 255, 255, 0.9)";
        a.beginPath();
        for(var b = 0;b < 70;b++) {
          var f = e[b];
          a.moveTo(f.x, f.y);
          a.arc(f.x, f.y, f.r, 0, Math.PI * 2, !0)
        }
        a.fill();
        h += 0.01;
        for(b = 0;b < 70;b++) {
          if(f = e[b], f.y += Math.cos(h + f.d) + 1 + f.r / 2, f.x += Math.sin(h) * 2, f.x > d + 5 || f.x < -5 || f.y > c) {
            e[b] = b % 3 > 0 ? {x:Math.random() * d, y:-10, r:f.r, d:f.d} : Math.sin(h) > 0 ? {x:-5, y:Math.random() * c, r:f.r, d:f.d} : {x:d + 5, y:Math.random() * c, r:f.r, d:f.d}
          }
        }
      }, 70)
    }
  }
  snow();
</script>

只是后两种效果看着都不怎么像真的雪花呢

从139邮箱扒下来飘雪效果

01/9
10:15
学习

网站雪花飘落效果一例

刚刚找到并且使用的一个效果。严格来说飘落的并不是雪花,只是白色的光团。使用起来很简单,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>snow Examples</title>
</head>
<body style="background: #000;">.
<script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="https://saber.love/f/snow.js"></script>	
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999;" class="snow-container"></div>
</body>
</html>

这个js貌似没有提供自定义参数,有时产生的大光团太大了,算是一个缺点吧。有时候光团会有随着移动产生变大变小的效果,与鼠标的移动也有互动效果,产生了3D感,不过感觉还是可以改进(反正我是站着说话不腰疼=,=)。

网站雪花飘落效果一例

10/4
09:36
学习

JavaScript在用户离开和关闭页面时提示确认

通过JavaScript的onbeforeunload事件,可以让浏览器在用户关闭页面时显示确认提示。简单的示例如下:

window.onbeforeunload = function(event) {
	event = event || window.event;
	event.returnValue = '';
}

效果大致如下:
js JavaScript onbeforeunload 关闭页面

onbeforeunload事件发生在用户刚进行了要离开页面的操作(举例为刷新操作),但此时浏览器还没有发起网络连接。
onunload事件则发生在onbeforeunload之后,它是浏览器已经拿到了服务器返回的页面,准备替换掉现有页面时发生的。

早两年chrome里除了浏览器自身的提示,还可以加自定义的文字提示,但现在似乎不行了。

JavaScript在用户离开和关闭页面时提示确认