Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){ window.location.href="手机页面...window.location.href="平板页面"; }else{ window.location.href="其他移动端页面...---识别手机或电脑的js开始---> (function(){ var res = GetRequest(); var...=-1){return true;} }; //将下面的http://abc.com改成你的wap手机版页面地址 如我的 http://abc.com var toMobileVertion...---识别手机或电脑的js结束--->
手机端和PC端分别加载不同的js客服代码（注意：是要在PC和手机端分别加载不同的js文件） 第一种方法（简单型）： // 根据屏幕尺寸...">'); } 第二种方法（已测试通过，项目真实在用）： 这样子我们直接在PC端和手机端分别输出不同的js。...所以，我们在手机端和PC端分别加载不同的js的需求完美解决了。 ...bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) { // alert("手机浏览.../pc.js",function(){ //加载pc.js,成功后，并执行回调函数 console.log("加载js文件"); }); }
利用js代码和css代码制作一个图片切换效果 点击目标按钮切换相应的描述或图片 image.png 点击按钮切换图片 代码：
计算手势在手机屏幕上滑动时，手势滑动的距离，代码如下： function wetherScroll(){ var startX = startY = endX =endY =0; var body=...distanceY=endY - startY; // console.log(“distanceX:”+distanceX+","+“distanceY:”+distanceY); //移动端设备的屏幕宽度
二、pc、移动两个网站 一般政府，学校或中大型网站多采用这种方式，一个pc站，一个手机站，分别用不同的域名，或者子目录形式访问，不同的访问端打开不同的站点，页面地址完全不一样。...好处：制作两套模板，两个端都可以获取到好的浏览体验，前端制作不用考虑兼容性问题。 弊端：由于网站地址不一样，需要维护两个网站，后续工作量大。 既然传统做法出有弊端，那么就需要解决这个问题。...现在需要改进是的：能否在同一个url地址，然后根据浏览设备加载不同的模板呢，pc端浏览加载pc的模板，手机端浏览加载手机模板？...1、首先在模板目录下，新建一个名为：首页的文件夹，文件夹下新建两个文件，index.cshtml和index.mobile.cshtml，如下图： 这里有个命名约定规则，手机端命名必须是 *.mobile.cshtml...现在测试一下效果，先用电脑浏览器打开首页，效果如下： 然后浏览器切换到移动端模板，刷新一下页面，效果如下： 模板会自动根据浏览设备来加载不同的模板，不只普通模板页面支持这种方式，Pageadmin的母板页模板
用js限制网页只在手机端中打开，网站屏蔽PC端访问JS代码，网站只允许手机端访问。
8.手机端设备自适应标签 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale...入门 <em>js</em>是javascript的简称。...引入<em>js</em>文件举例使用（文件名称可以自行改变）： <em>js</em>中的消息框，举例提示刘金玉编程几个字： alert("刘金玉编程") 我们使用一个...}); 在js中定位html元素与css定位html元素的方法是一样。 jquery是js中的一种整合框架。 如何使用jquery来获取html元素呢？.../jquery-3.4.1.js" type="text/javascript" charset="utf-8"> <script src="<em>js</em>/main.<em>js</em>" type="
在index.html里面配置js控制选择那一个文件夹下的文件就可以了。 我们要利用：Navigator 对象，Navigator 对象包含有关浏览器的信息。...iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(sUserAgent)) { //跳转移动端页面...wap.baidu.com" rel="external nofollow" rel="external nofollow" ; } else { //跳转pc端页面
==t.nodeType;){if("function"==typeof t.matches&&t.matches(e))return t;t=t.parentNode}}}])}); 上面为工具js...二次封装 import ClipboardJS from 'mioJs/utils/clipboard.min.js' getClipboardData(data, callback = (res)
minimum-scale='+phoneScale+',maximum-scale ='+phoneScale +',user-scalable=no,">'); 18 } 19 做手机端页面最头疼的就是物理分辨率和逻辑分辨率的转换了...，在手机端的样式也会因此大乱，在页面头部加入以上一段js之后，在手机端就可以正常显示了， var phoneScale = phoneWidth/750; 除以的为设计图设计的页面宽度，750是按iphone6...来设计（根据自己使用需求来修改），即让页面的 放大比率=屏幕的逻辑分辨率/物理分辨率，从而达到适应手机的效果。...试想，浏览器如果把电脑端的980px的网页展现在宽度为750px的iphone6手机屏上，势必会放不下，手机端横向会出现滚动条，怎么阻止这种情况呢，很简单，浏览器默认一个虚拟窗口，不同浏览器有不同的虚拟窗口宽度的默认值如...; opera:850px; Andriod webkit:800px; IE:974px; 然后会把这个980px虚拟窗口装进宽度为750px的iphone6中，当然这样的话必须缩放，这就是为什么在手机中展现电脑端页面没有出现横向滚动条
移动端H5各种各样的列表的制作方法(三) by FungLeo 前情回顾 在上一篇博文《移动端各种各样的列表的制作方法(二)》中,我们再通过两个DEMO,演示了一下在移动端H5中更多需求的列表制作.不过...带小图标的列表 上面两章,我们做了一些普通的列表.而在移动端H5中,我们经常会做一行一个小图标的列表.这个DEMO,我们就来制作这种类型的列表.示例如下图所示.....这里我们加了一个i标签来制作图标.给每一个i标签加上不同的class是为了订制不同的图标....此外,由于每个图标都得不一样,所以我在html中给每一个i标签都加上了不同的class方便在CSS中调用不同的图标图片.也就是说,我们使用背景图片的方式来制作图标....带图标的列表,但是分割线要和文字对齐. 首先,我们来看效果图: 这个列表和上面的列表乍一看没什么不同.但仔细看就会发现,这个分割线是和文字对齐,而不是和图标对齐的.
移动端H5各种各样的列表的制作方法(四) by FungLeo 前面三章,都是说一个普通的列表应该如何去实现.难度由易到难,但总的来说,一看就能掌握.这一章,我们来做图文列表....普通两列图(图为正方形)文列表 两列的图文列表是非常常见的.在JD\TB等电商移动端H5更是比比皆是.这里,我们先来做一个最简单的.如下图所示....这里是一个非常简单的双列布局的图文列表,每一块,包含图片,名称和价格.在PC端实现这样的布局实在是太简单了.但是由于我们在移动端,不同的手机的宽度是不一致的.因此,要求是自适应的....小结 这一章节,我们通过简单的一个双列布局的图文列表,着重要掌握以下几点内容 在移动端,要用到左右边框的时候,尽量不要使用border边框来实现.本例使用 outline来模拟.
移动端H5各种各样的列表的制作方法(二) by FungLeo 前情回顾 在上一篇博文《移动端各种各样的列表的制作方法(一)》中,我们通过两个简单的DEMO,演示了一下在移动端H5中的列表制作.不过,这两个演示还是太简单了....可能大家觉得不过如此嘛.这一章,我们将制作稍微复杂一点点的列表.....我们以往都是使用span或者其他标签来制作.此后,时间有了专门的标签了.真是意见可喜可贺的事情....因为,移动端都是触摸操作.我们要保证访客在点击列表的任意位置都能打开链接,因此,a要块状化,并且最大化的处理.这点,和我们在PC端制作的时候是很不一样的....小结 相信这两个DEMO并没有非常难理解,聪明的你一定是一看就明白了.我们小小的总结一下: 链接块状化,是为了便于移动端的用户能够更加方便的点击到链接 background-size 的使用方法和简写,
移动端H5各种各样的列表的制作方法(一) by FungLeo 前言 随着移动互联网的发展,大量前端人员从pc端转移动端.而很多PC端的前端经验并不适用于移动端.前几日我撰写的一篇博文《移动端H5的一些基本知识点总结...》获得了大量的点击量.因此,FungLeo决定,在接下来的时间里,我将围绕移动端,展开一系列的教程....最简单的列表 首先,来一个最简单的列表.我们要实现的效果,如下图所示: 如上所示,我们要实现的就是这样简单的列表.这个没有丝毫的难度. html代码 这段代码.否则移动端的浏览器会当成PC版的网页,是可以伸缩的....还是一个简单的列表 首先,我们来看效果图: 这个列表咋一看,和上面的列表没有任何区别.但是,我们仔细看一下,会发现下面的线条是不顶头的.
移动端H5各种各样的列表的制作方法(五) by FungLeo 在第四章中,我们学习了如何来做一个双列的图文列表.但是,这个图文列表是有一定的局限的.局限就是,其中的图片必须为正方形....当然,在实际项目的实践中.这样也是够了的.但是,这个问题还是不周全,比如,图片没有加载完成的情况下,还是可能出现变形之类的.而又要考虑自适应等多种问题.因此,本章节,我们还是来做双列的图文列表.不同的是...width: 100%;padding-bottom: 100%;position: relative;,用来形成一个随设备宽度变化的正方形的盒子.如果你看不明白,可以参考我之前的一篇博文《纯CSS实现移动端常见布局...强调: (1.)安卓4.4以下和部分国产移动端浏览器不支持clac\ vw \ vh 等最新的CSS属性.因此,文中的方法是使用传统CSS中的技巧解决....(2.)本系列文章我准备循序渐经的讲解移动端的一些我的经验见解.某些人看了第一章就惊呼,这也太简单了.我想反问一句,几乎任何编程书籍都是从hello world开始的.是不是也都是很简单呢?
移动端H5各种各样的列表的制作方法(六) by FungLeo 在前面两章中,讲的都是两列布局的图文列表.而事实上,两列布局的图文列表还是比较简单的.这一章,我们将要更进一步来挑战难度.实现一个相对来说...并且,为兼容安卓4.4以下,以及部分傻逼国产移动端浏览器.我们将在实践中,放弃calc\vh\vw等css3最新属性.只使用比较简单的参数,来实现这个布局....复杂图文混排列表 这部分是比较复杂的,但是,特别特别的常见.我们先来看一下最终效果图. 如上图所示,这应该算是一个比较复杂的图文列表了.不知道你看到这个布局,你会构建怎么样的DOM框架....强调: (1.)安卓4.4以下和部分国产移动端浏览器不支持clac\ vw \ vh 等最新的CSS属性.因此,文中的方法是使用传统CSS中的技巧解决....(2.)本系列文章我准备循序渐经的讲解移动端的一些我的经验见解.某些人看了第一章就惊呼,这也太简单了.我想反问一句,几乎任何编程书籍都是从hello world开始的.是不是也都是很简单呢?
其中文官网地址是：http://www.expressjs.com.cn Node.js (Express.js) + Vue.js (Element UI) 全栈开发王者荣耀手机端官网和管理后台，目前的...【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台 本项目是 Bilibili 全栈之巅 视频教程相关源码 https://github.com/wxs77577/node-vue-moba...(list-card, nav, swiper) 首页新闻资讯-数据录入(+后台bug修复) 首页新闻资讯-数据接口 首页新闻资讯-界面展示 首页英雄列表-提取官网数据 首页英雄列表-录入数据 首页英雄列表...、NodeJs+VueJs全栈开发王者荣耀官网(Express+ElementUI) [第一章 + 第二章] NodeJs + VueJs (Express + ElementUI) 全栈开发王者荣耀手机端官网和管理后台...[第三章]NodeJs + VueJs (Express + ElementUI) 全栈开发王者荣耀手机端官网和管理后台 - 第三章 [第四章]NodeJs+VueJs全栈开发王者荣耀官网(Express
移动端H5各种各样的列表的制作方法(七最终章) by FungLeo 通过数个章节,从最简单的一行文字的列表,到各种图文列表.事实上,绝大多数列表的形式,都可以在我这六章的博文里找到相对应的方法.方法就是这些方法...单行图文列表 淘宝的H5的设计,有很多值得学习的内容.而我上面的截图,就是来自于淘宝的聚划算 如上图所示,好像这个列表比较复杂.而事实上,这个列表一点都不复杂.我们在第三章中,介绍了如何实现列表前面有小图标的做法...而这个案例,其实就是一个大号的图标嘛.把图标,换成图片,就OK了.图片的宽度是固定的,而后面的文字的宽度是不固定的.这个和图标列表的思路是一模一样的....总结 宽度和高度挂钩的秘密,内填充值.这个在PC端上不显山不露水的特性,在移动端真心是解决大问题....在PC端文档流布局是天然的.甚至很错入门几年的菜鸟前端,都不知道或者不熟悉定位布局.但是移动端,定位布局更加常见和更加重要 善于拆解复杂的问题,透过问题看本质,化整为零的解决问题.
但目前全景VR短视频内容对于普通用户的制作门槛偏高，需要专业PC端软件来协助制作，这对提升用户体验和产出高质量的内容，又产生了极大的限制。 ?...而美摄SDK已经首推了移动端的VR视频编辑解决方案，极大地简化了全景视频的编辑流程，更是支持360VR全景动态贴纸、全功能文字字幕及数十款特效滤镜的全景视频编辑，让创作者能够随时随地用手机制作出VR大片...首先美摄SDK作为首家支持移动端VR视频编辑的SDK产品，将原本只能见于PC端的视频剪辑完美植入移动端，并可以实现全景图片的8K编辑。从这点来讲，美摄SDK便是开创了移动端VR视频剪辑的一项先河。...业内知名的VR视频内容平台VeeR，推出了一款手机剪辑全景视频的APP---VeeR Editor。...不但极大地简化了全景视频的编辑流程，更是支持动态贴纸、文字字幕及数百首版权音乐的全景视频编辑，让创作者能够随时随地都能用手机制作出VR大片。
收录链接突破1800+条，前后端完全独立制作，现主题作者Art_Blog开源给所有小伙伴免费使用！...主题截图 后台截图 运行环境条件 虚拟主机/云主机环境选优先用Apache、wordPress版本≥4.6，≥5.3服务器php版本≤php7.2，如果出现报错，请尝试切换php版本 使用说明 上传至...关于博客（单页） │ page-message.php //碎言碎语（单页） │ page-reminder.php //低版本浏览器重定向 │ category.php //通用列表模板...sf-pro-text_bold.woff2 │ sf-pro-text_regular.woff2 │ sf-pro-text_semibold.woff2 │ style-ios.css //手机端样式...│ jquery-2.1.4.min.js // 公共js库 │ │ rem.js //移动端自适应适配 │ │ swiper.min.js //移动端的swiper轮播插件 │ │
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
