当前位置: 首页 > Web前端 > CSS

这些常用的H5代码你知道吗

时间:2023-03-30 18:08:53 CSS

这些常用的H5代码你都知道吗?但是,它仅适用于Android手机。兼容苹果手机,需要在跳转码后加上returnfalse;这个句子。跳转后刷新页面,添加self.location.reload();这个句子。window.history.go(-1);//返回上一页returnfalse;//兼容ios系统self.location.reload();//ios刷新页面2、微信浏览器禁止页面下拉addEventListener()方法为指定元素添加事件处理函数。preventDefault()方法阻止元素的默认行为。document.addEventListener('touchmove',function(e){e.preventDefault();},{passive:false});document.oncontextmenu=function(e){//orreturnfalse;e.preventDefault();};3。媒体查询方向:横向/纵向方向:纵向|landscapeportrait:指定页面在输出设备中可见区域的高度大于等于宽度landscape:landscape@mediascreenand(max-width)excepttheportraitvalue:320px){}//Width@mediaonlyscreenand(orientation:landscape){}//判断横竖屏4.上传图片显示显示上传的图片,可以在后台管理系统中使用。//JS代码函数show(file){varreader=newFileReader();//实例化一个用于读取文件的FileReader对象varimg=document.getElementById('img');//获取要显示的图像的标签//读取文件对象数据reader.onload=function(evt){img.style.display='block';img.src=evt.target.result;}reader.readAsDataURL(file.files[0]);}5.长按事件$(".btn").on({touchstart:function(e){//长按事件触发timeOutEvent=setTimeout(function(){timeOutEvent=0;location.href='www.baidu.com';//跳转},400);},touchmove:function(){clearTimeout(timeOutEvent);timeOutEvent=0;},touchend:function(){clearTimeout(timeOutEvent);if(timeOutEvent!=0){alert('长按打开');}returnfalse;}})6.根据页面高度调整样式varheight=$(window).height();if(height>625){$('.box').css("margin-top","10px");}7.清除浏览器上的搜索框.search::-webkit-search-cancel-button{display:none;}.search[type=search]::-ms-clear{display:none;}中的叉号8.确定H5页面Android和ios那个时候Android和ios在显示上还是有一些区别的,所以有时候我会根据不同的手机系统适配,写不同的样式varu=navigator.userAgent,app=navigator.appVersion;//androidvarisAndroid=u.indexOf('Android')>-1||u.indexOf('Linux')>-1;//iosvarisiOS=!!u.match(/\(i[^;]+;(U;)?CPU.+MacOSX/);if(isAndroid){}else{}9.去除背景色*{-webkit-tap-highlight-color:transparent;}移动设备点击时使用该方法生成背景色10,背景图片填充text.box{background-image:url(image/bg.jpg);background-size:cover;background-clip:text;//将块中的文本作为裁剪区域,文本的背景为块的背景color:transparent;//文本设置为透明background-repeat:不重复;}

最新推荐
猜你喜欢