最近做的一个项目需要同时适配PC端和iPad及mobile移动端,由于PC端的设备屏幕宽度比iPad和mobile端大太多,因此页面布局需要进行区分。而前笔者在端项目中使用了vue和vue-router进行开发,也就是说需要根据当前客户使用的设备属于哪种客户端让路由决定进入哪种设备适配的页面组件。因此需要在邻项目路由的入口处判断客户使用的设备是PC、iPad还是mobile。
有时候会被别人问起pc端和手机端有什么区别。一般来说都会去说,兼容性啊,适配啊,网页布局这方面的事情,但是我觉得这个问题如果想要拿一个满分应该从区别出发,从如何判断收尾。毕竟你只知道区别没有用,他可能更想让你说出来你是怎么判断的。
手机端和PC端分别加载不同的js客服代码(注意:是要在PC和手机端分别加载不同的js文件)
近几年来,随着手机和pad的普及,越来越多的用户选择使用移动客户端访问网站,而为了获取更好的用户体验,就需要针对不同的设备显示出最合适的匹配,这样就是近年来流行的“响应式web设计”。 响应式web设计是一种纯前端技术js、css等实现的针对不同设备访问同一网址看到不同的布局,是页面内容更适合当前设备阅读。但这个不是本文的重点,重点还是放在nginx如何实现上来。 本文要讲的的是如何使用nginx区分pc和手机访问不同的网站,是物理上完全隔离的两套网站(一套移动端、一套pc端),这
本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React项目配置1(如何管理项目公共js方法)---2018.01.11 2、React项目配置2(自己封装Ajax)---2018.01.12 3、React项目配置3(如何管理项目API接口)---2018.01.15 4、React项目配置4(如何在开发时跨域获取api请求)---2018.01.16 5、React项目配置5(引入MockJs,实现假接口开发)---2018.01.17 6、R
通过判断浏览器的 userAgent,用正则来判断手机是否是ios和Android客户端。代码如下:
平常开发很常见的功能,在移动端需要根据javaScript来判断手机是安卓还是ios进行应用市场跳转。
js判断客户端是否是IOS或者是Android //如果返回true 则说明是Android function is_weixin() { var ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == 'micromessenger') { return true; } else { return false; } } j
HTML5学堂:相对来说,JS在移动端要远远低于PC端的使用频率,因此积累的开发经验并不是太多。在这里简要整理一些JavaScript在移动端的项目经验,主要包括click点击事件延迟、元素高亮点击区、zepto的touch问题等。 移动端click时间300ms延迟 在移动端,click点击事件会造成300ms的延迟,造成这种延迟的原因在于:当用户一次点击屏幕之后,浏览器并不能立刻判断用户是要进行双击缩放,还是想要进行单击操作。因此,浏览器就等待 300 毫秒,以判断用户是否再次点击了屏幕。 对于这种体验
一些调试工具 说起手机端调试,相比大家都不陌生。 由于手机浏览器没有像PC端浏览器一样有开发调试工具,所以一般手机端的调试都要借助于电脑,现在的调试方式通常有以下几种。 直接在chrome, firefox等开启模拟器调试简单直接,还能模拟网络等,但是仍然无法100%还原手机的真实情况。 实现一套pc调试面板 采用这种实现方式有weinre,weinre很早前就比较流行了,使用也比较广泛,运行后会在PC上生成一个像chrome开发工具一样的调试器。能对手机进行远程调试,能操作DOM,打印console输出等
昨天,发布了《完美实现移动主题在 360 网站卫士缓存全开情况下的切换》一文,通过 JS 实现了主题在移动端访问时的自动切换,最后提到了可以在电脑版和移动版的 footer 里面加上手动切换链接,实现手动版本切换功能。 今早发现,电脑版切换到移动版是没问题了,但是移动版切换到电脑版,JS 将会再次工作uaredirect.js会再次做 UA 判断,然后由又跳回了电脑版! 也就是说,手机上浏览无法手动切换到电脑版,看来还得继续折腾! 于是,想到一个办法,给移动版的切换链接带上一个参数,再修改 uaredire
经常在项目中会有支持 pc 与手机端需求。并且pc与手机端是两个不一样的页面。这时就要求判断设置,根据不同的设置跳转不同的路由。 在 router/index.js 中添加两个页面
前言 代码写的久了,就会发现很多时候都是在写一些重复的东西,这个时候就应该要考虑到提高工作效率了,比如对常用方法的封装,例如日期格式化,浏览器类型判断等。 今天这篇文章我们就来看看如何封装常用的Javascript方法,打造出属于自己的一套Javascript武器库吧。封装的代码为了不依赖于其他库,都采用原生的Javascript编写。 文中的代码有些比较长,理解的不是很清楚的,可以直接去github上看。 https://github.com/zhouxiongking/article-pages/blo
前几天遇见了js不兼容问题,然后使用了一下vconsole,发现连这个也不兼容,于是放弃了修复。今天刚好有人问到移动端的问题,于是就想分享一下vconsole这个移动端的调试工具。一篇水文,随意看看。
虽然当时构思的时候想法很丰满,但是做出来以后突然觉得功能好鸡肋。左右浮动切换上下篇算是唯一的亮点了。上下按钮用拖动方式体感上还不如直接用侧栏菜单的按钮功能来的方便。尤其是考虑到PC端,手机端,窄屏设备,触屏电脑等设备动作的监测判断。总是牵扯到一大堆的交集。然后就是点击动作在某个屏宽比下会执行两次。 Dorakika的代码我也没吃透,似乎有个长按以后能够拖动悬浮菜单的功能,搞不好我多删了一些代码,长按以后拖动的结束动作一直没法按照期望的来。 这个悬浮按钮不打算实装了,作为学习用吧。bug太多,不修啦。
现在很多老版的网站都会有m站,在我们使用移动端访问时会自动跳转到m站,那么如何判断客户端设备是电脑还是手机或者是平板呢,有的使用的是js判断方式,以前我们使用的方式也是这样的,但是这样是损失资源的,因为js判断是在页面上进行的操作,这样就会有数据的请求。然后,获取完数据,判断设备类型,进行跳转,再次获取数据,渲染页面。浪费了很多资源,也加长了用户的等待时间。
cocos2d-js除了做native游戏外,还可以用来做HTML5游戏/动画,那么它跟adobe的createjs框架比较会怎么样呢? (背景知识:createjs是adobe支持的HTML5框架,
Computed 在 Vue 中常用,是一种计算属性,里面的值是响应式的,但你知道 getComputedStyle 这个 CSS 属性吗?Computed + Style ,没错,样式也能做到响应式。
今天在微信公众号看到一篇技术博文,想用印象笔记收藏,所以发送了文章链接到pc上。然后习惯性地打开控制台,看看源码,想了解下最近微信用了什么新技术。 呵呵,以下勾起了我侦探的欲望。页面加载后的异常点就是只加载了一个js,如下图所示:
eruda与腾讯推出的vconsole很相似,都是用于移动端的调试,让开发者在移动端的浏览器中获得近似PC端浏览器的调试能力。 截止至本文发稿之日,eruda在GitHub上已经有2.7K个star
我试图通过将文章底部的按钮改至左右两侧,类似翻页键,同时添加悬停动作,通过css对兄弟相邻元素的hover监测来控制显隐,悬停按钮时在页面正中显示对应文章卡片。
Nuxt.js就是一个Vue的服务端渲染框架,和React的服务端渲染框架Next.js类似,
虽然自己的网站流量十分少,但是还是加了一个谷歌广告,用来自己耍。添加之后发现很多电脑浏览器插件很直接进行屏蔽,手机浏览器也会进行屏蔽。虽然自己也不喜欢广告,但是如何在检测出广告被屏蔽后在原来位置上输出一句话提醒浏览者不要关闭本站的广告展示呐? 自己在网上找了一些有用的方法,一种是检测广告div的高度,如果高度是0则进行了屏蔽,另一种是自己建一个js,其名称和路径与真实广告的js差距不大,能让插件误拦截,通过检测该js是否加载来判断是否遭到屏蔽。 因为不同的广告插件可能自己拦截方式不同,我就把这两种方法结合一下来进行判断。 首先在自己的广告单元上加两个div(可以根据自己的需求,自行更改)
就当写一篇随笔吧~上星期还在做加盟模块(兼容微信端),这星期已经加班做快递扫码模块(react+node),所以我感觉只有弹药备足了才能稍微轻松些应对各种需求。实话说在同个部门的大佬面前差距确实大,如何判断差距呢?我的观点是一是效率,二是质量。Fe这行,如果给你个需求写出个怎么怎么样的界面,我觉得任何人学几个星期肯定都会了,但是能否完成一个具有大局观的界面呢?包括兼容性、自适应,最重要的是扩展性如何呢?(js的封装、抽离,图片、css、js的压缩等等)。部门一些大佬的代码习惯很有个性,但是让人看起来是非常友
欢迎访问源码: https://github.com/ZZES-ZCDC/questionnaire_manage_bd
现在在做的项目是一个对功能要求比较高的项目,同时也有SDK端的开发.项目中有一个场景就是在pc端通过富文本编辑的内容要在SDK端显示,测试的时候发现有一些图片超出了手机的最大宽度,会出现一个横向的滚动条,这样很影响体验.做显示这块的是公司做android和ios的同事,他们拿到的值富文本直接导出的json格式的html代码,因此他们很难再对代码进行二次处理,解决问题的源头又回到了我这里~~ 言归正传,想要解决问题就要从标签的style属性着手;本人在追踪数据流的时候发现了在导出编辑器内容的时候会把编辑器内容全部遍历一次的地方,遍历的数组大概就长这样(这其实是遍历之后的,理解我的意思就行)
这两年来我们发现越来越多的视频应用使用了m3u8格式的视频,因为可以兼容PC、移动端。相比mp4等视频源,m3u8可以减轻服务器压力(按需加载)。HLS是由苹果公司率先提出的一种协议标准,可用于直播。
JS判断当前设备是 PC IOS Andriod <script > window.onload = function(){ var isPc = IsPC(); var isAndroid = is_android(); if (isPc){ //pc location.href = url; }else{ if (isAndroid){
响应式网站:即pc和移动端共用一套网站,只不过在不同宽度的屏幕下,样式会自动适配。配合媒体查询监听,通过判断屏幕宽度来改变样式,以适应不同终端。例如:三星电子官网: www.samsung.com/cn/ 缺点:制作麻烦,需要花很大精力去调兼容性问题
星期2是公众号更新的一个时间点,Shawn这几天情事太多,眼看就快要过12点了,公众号教程看来今天黄呀!但是不发晚上睡不着呀,看来我是中了得到罗胖的毒“死磕自己”,一定要把公众号给发了。还好之前留着大神Colin的一些文章,还没在公众号上推送过,我立马读了一下,任然有不少收获,现将这篇文章分享给大家,在此感谢Colin!
两个八竿子打不到边东西怎么建立关系? 个人理解可以想象成开房问题。首先让WEB随机生唯一成门牌号,用户扫码得到门牌号,这里不用担心用其他扫描得到门牌号,因为我们只知道门牌号没要钥匙,没有钥匙这是没用的。 扫一扫就拿到门牌号就相当于打电话告诉老板你要这个房间,这时老板也就得到你的信息也就是说谁扫了二维码!好了现在知道是谁了。我们就可以用js轮询访问老板是谁要了这个房间然后就开房就成功了! 其实,上面写的都是错的,我压根没有做过类似的事。
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
ctrl + shift + P 打开命令面板,搜索 screen 可进行各类截图,包括节点截图、区域截图和全屏截图
动态的编辑中,主要运用的原理是vuex,其实也有考虑用属性传递(props),但是我的富文本编辑并非简单的作为组件来实现的。而是作用一个单独的子页面来实现的,这样,在文档上就没有直接的关联,所以最终采用vuex。当然采用的编辑默认规则为只允许编辑最后一条动态,因为如果还去编辑以前的动态,一方面时间是否变更是个现实意义上的难题,另一方面,应该让更改的难度略微大一些,不然随随便便更改,那动态就成为了自我满足的工具。
Android 提供多种向用户呈现内容的方式,要提供与平台其他部分一致的用户体验,通常最好构建一个原生应用,并在其中融入框架提供的体验,某些应用可能需要增强对界面的控制,在这种情况下,可以使用 WebView 显示受信任的第一方内容。
在近期的一个移动端项目中,有一个页面需要有弹框提示,并且这个弹框通过关闭按钮关闭。页面当中使用了 iScroll 来实现页面局部滚动,在 iScroll 的配置当中把 tap 和 click 事件都开启了。 代码如下:
navigator对象有一个属性为userAgent,这是一个只读的字符串,声明了浏览器用于HTTP请求的用户代理头的值。所以我们可以通过判断navigator.userAgent里面是否包含某些值来判断。如下为userAgent的打印值。
现代生活中,经常会用到导航系统,导航系统必不可少的一个功能就是罗盘,何为罗盘?简单罗盘通过磁力将内部的指针指向某个方向,从而实现判别方位。现代技术以及将罗盘缩小到移动设备端,我们可以直接在手机端查看罗盘的指向。
一般禁止body滚动的做法就是设置overflow:hidden。但是很奇怪的发现在移动端浏览器和微信浏览器上这个不起作用,然后我分析了我的写法,就是在body上加了一个class去定义属性,然后改成标签的定位,如body{overflow:hidden;},这个实现是可以的,没有滚动条。再进一步分析,如果要用class去实现没有滚动条,如下代码设置:
访问站点只要后面目录带apk(不管是文件还是目录),就会判断请求头,如果为手机移动端的请求头,就会跳转到博彩网站,如果是电脑PC浏览器,就会弹空白页访问站点,让你看不到跳转后的网址,只要域名后面地址带apk(不管是文件还是目录),就会判断请求头,如果为手机移动端的请求头,就会跳转bc网站,如果是电脑浏览器,就会弹空白页,最近也加上客户订单越来越少,领导也是着急,很大一部分客户渠道来源都从百度点击来的,静下心来看看网站到底是怎么回事,不看不要紧,简直吓我一跳。网站在百度里的收录增加许多,本来以为是更新的文章导致的,可是仔细一想也没那么多的收录呀,site:网站,点击到十页以后竟然发现了问题的关键,百度收录了一大堆我们网站没有的URL链接,复制那个我们域名的链接,提示不存在,从百度收录点进去跳转到BC网站。
AppCan IDE基于Eclipse定制,支持跨平台、本地打包、模拟调试、真机同步等功能
这两个都是font-style属性的值,这两个值都能实现倾斜的效果,但是有区别的。
博客在手机打开一直不能适配,手机上访问的体验很不好。今天把博客的大部分页面都加了自适配手机端,只要修改每个页面的css 即可。
用谷歌调试工具中的手机模拟器模拟手机进行webapp的开发,与真机上的效果还是有些偏差,opera手机模拟器的效果亦不佳。有时在pc上开发出来的webapp效果良好,在部分真机上就出现了偏差,这时候就需要我们进行微调。 在pc上微调后发布到测试环境再在手机上看效果,开发很慢,效率很低。这时候就想着有一个可以在手机上调试的工具,可以随时更改参数随时看到手机上的效果,免去发布再测试、模糊估计参数不精准的麻烦,weinre就是一个这样的工具。 weinre可以在PC上远程调试手机上的
在智能移动终端横行霸道的今天,使用移动终端来访问网站的用户是越来越多,但针对PC用户开发的网站,在移动终端上的体验非常差,这不,我们开始针对移动终端也制作了体验相对更好的页面,那么我们怎么才能知道用户使用的是哪种终端来访问我们的网站呢,总不能让用户再来记一遍我们的手机站域名吧,查阅资料,有很多方法可以实现这个需求,现在将发现的方法记录如下:
很多人会对响应式布局和自适应式布局产生混淆,这两者到底有着什么样的区别呢?因为不同于移动站,就事一个独立的站点,每个模块都有独立接口,但是Google一直以来就是推荐响应式设计的,至于为什么你可以参考此篇文章:移动端网站怎样做SEO优化?我们今天就来了解下二者之间是责骂定义的。
由于 File System是 H5 新加入的缓存机制,所以Android WebView暂时不支持
本文主要是讲解Uni-App开发技巧,如何快速的撸码?如何调试Uni-App?通过本文,让小伙伴们开发出优秀的Uni-App。
领取专属 10元无门槛券
手把手带您无忧上云