PC端页面转换成手机端页面的分辨率问题的理解 px vw rem 假如就以a4纸模式为设计图 ,在a3纸模式中设计,然后设计出来展示在不同的a4纸模式上 通常是 750px -> 100vw / 750px = 1.333333 rem 是转换了多大纸面积就展示多少相对的模式 , 因此, 不但能使 a3 以a4模式设计不出问题,还能让 a3 设计出的东西, 在任何a4 模式下的样子比例不变. vw - 1vw = 1%视口宽度 设计图的宽度是 750像素  1125像素 视口的宽度是 100vw

Egret 实现web页面操作PC端本地文件操作: http://edn.egret.com/cn/book/page/pid/181 //----------------------------------------------------------// 其他html5 操作PC端本地文件的方法参考: js 探索HTML5之本地文件系统API - File System API http://www.cnblogs.com/gbin1/archive/2012/04/13/2446069.

微信浏览器的页面在PC端访问: 普通的在微信浏览器看的页面如果不在php代码中解析一下,然后复制链接在PC打开就出现无法访问,因为它复制的地址是: https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx3ddcdc079ccd2ad7&redirect_uri=http%3A%2F%2Fjiyuqiao.welinli.com%2Findex.php%3Fs%3D%2Fwechat%2Fzwfw%2Findex.html&r

js判断页面在pc端打开还是移动端打开,分别跳转不同的index.html window.addEventListener('load', function() { // true为手机,false为pc if (!!navigator.userAgent.match(/AppleWebKit.*Mobile.*/)) { //跳转到移动端 window.location.href = window.location.href.concat('m/'); } else if (!navigato

关于EasyDSS EasyDSS商用流媒体服务器解决方案是一套集流媒体点播.转码与管理.直播.录像.检索.时移回看于一体的一套完整的商用流媒体服务器解决方案,EasyDSS高性能RTMP流媒体服务器支持RTMP推流,同步输出HTTP.RTMP.HLS.HTTP-FLV,支持推流分发/拉流分发,支持秒开.GOP缓冲.录像.检索.回放.录像下载.网页管理等多种功能,是目前市面上最合理的一款商用流媒体服务器! 详情可以访问EasyDSS流媒体服务器官方网站:www.easydss.com 问题分析

移动端调试神器vconsole,手机端网页的调试工具Eruda 移动端中使用 vConsole调试 移动端调试工具vconsole安装Git地址:https://github.com/WechatFE/vConsolevConsole是一款由微信公众平台前端团队打造的前端调试面板,专治手机端看log难题.目前vConsole自带有2个面板,默认为“日志”面板,负责展示log. 项目开发时经常需要debug调试,但在移动端debug则会阻断代码运行,并且很难判断出错在哪里,这里我们需要借助第三方插

vue判断是pc端还是移动端分别进入不同的页面 判断移动端代码如下: function IsPC(){ var userAgentInfo = navigator.userAgent; var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); var flag =

一般调试手机端页面时,基本是在PC端使用手机模式进行断点或console调试.或查看有用的控制台信息的,但依旧有部分功能无法在PC端调试,经常需要使用alert进行断点,然后在手机端看效果,但是这样并不好. 所以如果说有一种插件,可以在手机端查看控制台相关日志,那可比alert强多了. 最近找到了一款,还挺好用的. 插件名:vconsole 比如我们要调试一个移动端页面 我们在页面中注入一段代码:引入vconsole,并创建一个控制台对象. <!--//www.wuhairui.cn/build

在需要被pc端访问的页面的脚本里加上如下代码即可: <script>var system = {}; var p = navigator.platform; var u = navigator.userAgent; system.win = p.indexOf("Win") == 0; system.mac = p.indexOf("Mac") == 0; system.x11 = (p == "X11") || (p.indexOf

前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroClipboard.js). ZeroClipboard.js在Git上的地址为:https://github.com/zeroclipboard/zeroclipboard 注意:此js库不支持兼容手机端(包括Android.IOS),仅支持PC端浏览器. 第一步:将插件库引入到工程中. 把Git上

今天看博客的资源大小,发现背景图片有44k大的吓人,准备压缩一下. 压缩之后才发现,我的背景图片在手机端是没有显示的.原因是背景图片不支持缩放. 上网查了下,发现加入如下代码之后就支持缩放了: background-size:100% auto; 如果想要背景图片贴满整个屏幕,则加入如下代码: background-size:100% 100%;

以前写移动端都是用这段JS解决. (function (doc, win) { // 分辨率Resolution适配 var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) retu

一年不见,博客园都长草啦...... 前几日刚入手新手机小米5,系统真心流畅呀.为啥要买小米5呢,因为要提高生产力呀,好好玩移动前端开发呀哈哈哈 那么问题来了,要怎么调试手机上的前端页面呢? 很久很久以前,我的做法是:在PC上用Chrome移动模拟器调试好后,基本OK,再把相关文件传到手机上,在真机上测试以防特殊问题出现. 这个主要有两个缺点:一是传来传去的麻烦,数据量大的那就更麻烦了:二是只能显示地看着页面测试,不能做到真正的调试,测试出现问题了又得重新传. 现在,我的做法是:用PC端的Chr

/**      * 判断访问类型是电脑还是手机      */     $(function(){         var mobile_flag = isMobile(); // true为PC端,false为手机端         if(mobile_flag){             // window.location.href = " https://www.baidu.com/";         }else{             window.location.h

前言 页面自适应PC端.移动端大体上可以分为两种: 1.在同一个页面进行自适应布局,通常使用CSS3 @media 媒体查询器实现 2.两套页面,在后端进行统一适配,根据不同的浏览器UA返回对应的页面 本文记录在java后端进行PC端.移动端页面适配的方案 工程结构 想要实现后端统一适配,首先要规范好工程结构 后端代码,跟之前差不多,响应的viewName路径,直接从业务模块开始,适配工作交给aop:两套页面,对应的业务模块,分别放在两个目录下面 aop适配器 统一的适配工作交由aop环绕切面进

做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 使用了几种办法 1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常 2.使用rem的地方 width,height,margin,padding,left top都采用了REM, HTML的FONT-SIZE设置的为100PX.是为了计算方便

一.前言 最近同事问到一个问题,一个前端页面在IOS端真机测试下出现一个比较诡异的问题,如果没有遇到过估计也是一筹莫展.今天特此记录一下,或许能帮到后面遇到这个问题的朋友少绕一些弯路.这是关于JQuery 中的 delegate 和 on 给动态元素绑定事件触发不了的问题.文章以下只用 delegate 举例. 二.JQuery 的 delegate 作用. 首先我们来了解一下 Delegate 的作用.一句话带过:"给动态添加的元素绑定事件" 看图: 下面九个测试按钮是通过点击上面的

1.通过H5网页(非手机的返回功能)的返回功能可以返回,不会出现无法返回的情况. 2.横屏竖屏相互切换,能自适应,并且布局不会乱掉: 3.为能在不同分辨率的手机上能更好的展示,建议采用响应式设计(如:offerlist页面在大屏时显示3行,小屏时显示2行) 4.在手机上从list点击进入detail页面,要在原窗口打开,这样可以通过页头的返回按钮返回,而不需要通过手机的返回键返回,这样交互上更友好. 5.关注页面请求,是否会有多余的请求,或者请求后有多余的数据返回,尽量精简,否则会浪费流量. 6

1. 判断浏览器类型 浏览器判断使用的github开源项目current-device,下面是地址: https://github.com/matthewhudson/current-device 在浏览器中可以使用下面地址进行浏览器引入,但是加载速度慢,不建议使用,我这里是直接下载本地. <script src="https://unpkg.com/current-device/umd/current-device.min.js"></script> 2. 根

在做移动端网站时,有时因技术问题或其他原因无法制作响应式版面,而移动端页面只能放到子目录下,但是手机端通过搜索引擎进入网站电脑端子页面,无法匹配到移动端页面,使得用户体验很不好,即影响排名也影响转化.这里有一个js代码可以实现用户使用手机访问电脑端,自动跳转到对应手机页面.举例:一个pc页面https://www.800xiaos.com/2/2795/,对应移动url为https://m.800xiaos.com/2/2795/,使用手机端访问pc页面https://www.800xiaos.

很多时候,前端开发的页面,不仅要在PC端测试效果, 还要在手机端测试效果. 在开发阶段, 我们以 webpack-dev-server 来启动浏览器, 打开正在开发的页面. webpack-dev-server 可以做到实时监听文件修改, 自动更新浏览器中的网页, 一旦代码发生修改, 无须人工干预, 页面就同步到最新状态. 但是 webpack-dev-server 的默认配置, 不充许本机以外的设备访问开发页面, 这个时候, 当我们用手机通过局域网IP来访问页面时, 连接不上. 于是, 去官网