每天记录一点点

新手第一次做项目，有很东西都是接触到才学，每天尝到新知识就记下来。

监听手机横竖屏的状态

function hengshuping(){
        if(window.orientation==180||window.orientation==0){
        alert("竖屏状态！")
       
        }
        if(window.orientation==90||window.orientation==-90){
        alert("横屏状态！")
         
        }
        }
        window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false); 

 

移动端页面的单位用vw/vh很方便，但是如果页面上有输入框之类的，它在focus状态下就会打乱布局，所以在有输入框的页面可以把单位换成PX，用媒体查询的方法。

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

 还有一个更好的做法就是用JS动态获取当前屏幕的宽高，再赋值给当前页面的容器。P.S.当前容器要用 absolute 或者 fixed 定位，且不能设置了宽高。

 

 

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximun-scale=1.0">

这段代码的几个参数解释：

width = device-width：宽度等于当前设备的宽度

initial-scale：初始的缩放比例（默认设置为1.0）

minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）

maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

2、因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

<!--[if it IE 9]-->

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

<script src="https://oss.maxcdn.com/libs/respond.min.js"></script>

<!--[endif]-->

作者：南蓝NL
链接：http://www.jianshu.com/p/ceffe6444c93
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。



在做H５移动端视频时video标签可以设置下面这些属性，会自动全屏

<video id="video" x-webkit-airplay="true" webkit-playsinline="true" playsinline preload="auto"
           poster=""
           src="xxxx.mp4" x5-video-player-type="h5" x5-video-player-fullscreen="true"></video>

 

移动端用css3的zoom按比例缩放

//这个是适配js
        function setFullScreenMode(width) {
            document.body.style.width = width + 'px';
            var clientWidth = document.documentElement.clientWidth ? document.documentElement.clientWidth : 640;
            document.body.style.zoom = clientWidth / width;
        }
        setFullScreenMode(640);
        $(window).resize(function() {
            setFullScreenMode(640);
        });

 

H5新标签兼容，引入html5shim框架

<!--[if lt IE 9]>
<script> src="http://html5shiv.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

 

消除表格的间距的属性：border-collapse:collapse;

 

用rem布局，设置html的根字体大小，随屏幕变化而变。（例如设计稿的要求是120px，布局时直接写1.2rem即可）

 window.onresize=function(){
    resize(); 
}
function resize(){  
   document.getElementsByTagName("html")[0].style.fontSize = document.body.clientWidth/7.5+"px"; 
//这里是以750px的屏幕为标准,根字体大小为100px，在iphoe6下刚好为50px
};
resize();

 

判断iPad、iPhone、Android是横屏还是竖屏

function orient() {
if (window.orientation == 90 || window.orientation == -90) {
//ipad、iphone竖屏；Andriod横屏
$("body").attr("class", "landscape");
orientation = 'landscape';
return false;
}
else if (window.orientation == 0 || window.orientation == 180) {
//ipad、iphone横屏；Andriod竖屏
$("body").attr("class", "portrait");
orientation = 'portrait';
return false;
}
}
//页面加载时调用
$(function(){
orient();
});
//用户变化屏幕方向时调用
$(window).bind( 'orientationchange', function(e){
orient();
});

屏幕方向对应的window.orientation值：

ipad： 90 或 -90 横屏
ipad： 0 或180 竖屏
Andriod：0 或180 横屏
Andriod： 90 或 -90 竖屏

 

html实现“设为首页”代码

<a onclick="this.style.behavior='url(#default#homepage)';this.setHomepage('http://www.hwedus.com')" href="  ">设为首页</a>

html实现“加入收藏”代码

<a href="javascript:void(0);" onclick="AddFavorite('百度','http://www.baidu.com')">收藏本站</a>

function AddFavorite(title,url){

try

{

   window.external.addFavorite(url,title);

 }

catch(e){

 try{

    window.sidebar.addPanel(title,url,"");

  }

 catch(e){

   alert("抱歉，您所使用的浏览器无法完成此操作。\n\n请使用快捷键Ctrl+D进行添加！");

   }

 }

}

 

 

回到顶部

 

const scrollToTop=_=>{
const c=document.documentElement.scrollTop||document.body.scrollTop;
if(c>0){
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0,c-c/8);
}
}

 

移动端去掉默认一些样式：

-webkit-tap-highlight-color:rgba(0,0,0,0);    //透明度设置为0，去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android)

-webkit-appearance: none;   //消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式 ，不同type的input使用这个属性之后表现不一。text、button无样式，radio、checkbox直接消失

-webkit-user-select: none; //禁止页面文字选择 ，此属性不继承，一般加在body上规定整个body的文字都不会自动调整

-webkit-text-size-adjust: none; //禁止文字自动调整大小(默认情况下旋转设备的时候文字大小会发生变化)，此属性也不继承，一般加在body上规定整个body的文字都不会自动调整

 

移动端打电话、发短信、发邮件：

 

<a href="tel:10086">打电话给10086</a>
<a href="sms:10086">发短信给: 10086</a>
<a href="mailto:110@qq.com">点击我发邮件</a>

 

 

滚动条：

::-webkit-scrollba //滚动条整体部分
::-webkit-scrollbar-thumb   //滚动条内的小方块
::-webkit-scrollbar-track   //滚动条轨道
::-webkit-scrollbar-button  //滚动条轨道两端按钮
::-webkit-scrollbar-track-piece  //滚动条中间部分，内置轨道
::-webkit-scrollbar-corner       //边角，两个滚动条交汇处
::-webkit-resizer            //两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

 

重力感应：

// 运用HTML5的deviceMotion，调用重力感应事件
if(window.DeviceMotionEvent){
    document.addEventListener('devicemotion', deviceMotionHandler, false)
}   

var speed = 30;
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData){
    var acceleration = event.accelerationIncludingGravity;
    x = acceleration.x;
    y = acceleration.y; 
    z = acceleration.z;
    if(Math.abs(x-lastX)>speed || Math.abs(y-lastY)>speed || Math.abs(z-lastZ)>speed ){
        //这里是摇动后要执行的方法 
        yaoAfter();
    }
    lastX = x;
    lastY = y;
    lastZ = z;
}

function yaoAfter(){
    //do something
}