以下介绍在不用修改代码并发布项目的情况下,为我们日常使用的移动web应用(如手机web淘宝)添加vConsole调试工具的方法   vConsole介绍 vConsole是一个轻量.可拓展.针对手机网页的前端开发者调试面板.   使用vConsole的项目可以让手机上的Web浏览器,拥有类似PC调试工具的能力. 正常情况下使用vConsole需要修改项目代码并重新发布. vConsole官方介绍(https://github.com/Tencent/vConsole)   FreeHtt…

代码地址如下:http://www.demodashi.com/demo/11727.html 目前市场上APP常会嵌入不少的h5页面,参照支付宝显示web页面的方式, 做了一个导航栏下的加载进度条. 因为项目最低支持iOS7,所以不能使用WKWebView来加载网页, 只能使用 UIWebView, 但是查看 UIWebView的API, 并没有代理或是通知告诉我们webView加载了多少, 所以这个进度条我决定用模拟进度-俗称假进度(虚拟的方式来做,就是假装知道加载了多少). 一.压缩文件及…

原文出处: 盛瀚钦 本文主要列举了调试本地网页.查看测试环境网页的各种方法,涵盖了PC.iPad.移动端的调试技巧. 本文的不足之处在于,小溪里暂时还没有找到调试位于微信中和安卓各国产浏览器上的网页. 相关设备概念: PC :主要指以 Windows 系统为代表的台式机或笔记本,其通常为 1 倍屏 MacBook :主要指 MacBook Pro Retina,其为 2 倍屏,但 Mackbook Air为 1 倍屏 iPad :主要指以 iPad Air Retina 和 iPad Mini…

<meta charset='utf-8'><!-- 声明文档使用的字符编码 --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><!-- 优先使用 IE 最新版本和 Chrome --> <meta name="description" content="不超过150个字符"/><…

前言 作为Web应用中最常见的数据传输协议之一的Websocket,在我们日常工作中也势必会经常使用到,而在调试或测试中我们常常也有直接改变Websocket数据报文以确认其对应用的影响的需求,本文将介绍一种灵活方便的方式篡改Websocket收发的数据. 之前的文章里已经提到了如何利用FreeHttp修改HTTP的请求/响应报文,其实借助FreeHttp同样可以对Websocket数据报文做任意修改.(事实上burp suite 及 fiddler 的script 等工具也是可以完成的) Fr…

  概要 本篇介绍一种十分方便的方法为网站添加 vConsole 调试(通过篡改请求外部注入的方式,不需要您是网站的拥有者,主要用于调试线上站点). 之前已经发过一篇<借助FreeHttp为任意移动端web网页添加vConsole调试>,不过那篇操作起来还是比较复杂.因为那篇帖子使用了大量篇幅介绍操作原理,至使简单的问题也用了较长的篇幅,但是不是所有同学都喜欢那样的风格,而且为了演示FreeHttp对不存在资源的mock,对于vconsole.min.js使用了一个本地资源,让复杂度进一步加大…

引言 FreeHttp是一个Fiddler插件借助FreeHttp您可按照您自己的设定修改请求或响应报文,这对测试及调试都非常有用 比如您发现线上页面js文件错误,直接使用规则替换新的js文件您可以在不对线上服务做任何改动的情况下直接在线上验证 同样在发现服务接口数据不符合预期时也可以直接修改验证,甚至可以清除手机浏览器或微信服务号的登陆状态 希望在您了解其基本功能及工作原理后,可以在实际工作中为您提供便利   FreeHttp起源 如今互联网或IT行业几乎跟HTTP已经分不开了,系统与系统之间…

文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. HTML5 可以做什么 拍照 获取地理位置 手势 canvas 绘图和动画(硬件加速) localstorage,本地缓存 HTML5 动画效果 demo http://fff.cmiscm.com/#!/main CSS3 动画 http://isux.tencent.com/css3/inde…

META相关 1. 添加到主屏后的标题(IOS)…

META相关 1. 添加到主屏后的标题(IOS)  <meta name="apple-mobile-web-app-title" content="标题">   2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果) <meta name="apple-mobile-web-app-capable" content="yes"…

原文链接:http://liujinkai.com/2015/06/06/mobile-web-skill/ 移动端web开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我们站在潮头上. META相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,…

一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调试处处是alert的,这估计是最常用的办法了.以前很多时候为了预览页面在移动设备上的效果,需要先将页面上传到测试服务器,再将url输入到设备浏览器,或者使用第三方二维码扫码应用,通过移动设备访问打开浏览实际效果,每次换设备都要重复这些操作,页面多的话这些繁琐的事情就特别让人厌烦了.移动互联网的浪潮,…

常见问题 1.移动端如何定义字体font-family 三大手机系统的字体: ios 系统 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue 无微软雅黑字体 android 系统 默认中文字体是Droidsansfallback 默认英文和数字字体是Droid Sans 无微软雅黑字体 winphone 系统 默认中文字体是Dengxian(方正等线体) 默认英文和数字字体是Segoe 无微软雅黑字体 各个手机系统有自己的默认字体,且都不…

本篇是借助Charles来测试移动端的下半篇.(上篇任意门点我) 上次说到可以借助Charles来抓移动端的网络请求,接下来,我们来看一下怎么通过Charles来模拟返回,还是以网页版豆瓣为例. 先找到网页版豆瓣的请求   通过上面这句话,我们知道,请求被抓发到了豆瓣的movie文件夹下,我们去movie里找到具体的返回.   可以看到,我们需要的信息都在这个请求里,我们可以选择其中一个电影页面来进行测试,我们得借助Charles的断点的功能,在这个请求上打个断点.   打完断点之后,需要对断点…

系列目录     [已更新最新开发文章,点击查看详细] B/S架构的Web程序几乎占据了应用软件的绝大多数市场,但是C/S架构的WinForm.WPF客户端程序依然具有很实用的价值,如设计类软件 AutoCAD与Autodesk Revit.WPS.IT类的集成开发环境(数据库.图形处理软件).PC端的小工具等等,充分利用了客户端电脑的资源综合计算能力,处理性能更加优秀.如果想在C/S架构的客户端程序中集成Web应用,也只能借助Web网页,然后将网页集成到客户端程序中,这样就间接的达到了目的.下…

整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成2px. 但在IOS8中,已经支持0.5px了,那就意味着, 在devicePixelRatio=2的时候,我们可以使用css设置为0.5. 平时用的比较多的也是使用transform了: div{ height:1px; background:#; -webkit-transform: scale…

meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content=&…

meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content=&…

最近在了解移动端web开发的相关知识,有些概念总是模糊不清,这次花费了一些时间整体的梳理了一遍. 分辨率 分辨率可以从显示分辨率与图像分辨率两个方向来分类.显示分辨率(屏幕分辨率)是屏幕图像的精密度,是指显示器所能显示的像素有多少.图像分辨率则是单位英寸中所包含的像素点数,其定义更趋近于分辨率本身的定义.--360百科 显示分辨率指显示器所能显示的像素多少.如iPhone的分辨率:640x960,640x1136等.图像分辨率指单位英寸中所包含的像素点数(PPI).如下图中PS新建文件的截图.…

百度前端技术学院第一阶段任务十一,关于移动端WEB页面布局,参考资料如下(都是一些网页链接): MDN:手机网页开发 MDN:在移动浏览器中使用viewport元标签控制布局 移动前端开发和 Web 前端开发的区别是什么 Alloyteam移动开发规范概述 手机/移动前端开发需要注意的20个要点 w3cplus响应式技术资源 浅谈移动Web开发 Alloyteam Mars 移动WEB开发入门 移动开发资源集合 The Mobile Web Handbook MobileWeb 适配总结 移动前…

三个月前曾写过一篇跨终端响应式页面设计入门的博客,上了博客园头条也得到了不少关注,今天想在这篇博客的基础上,继续写一篇进阶的文章. 补充 基于“入门”一文,我想再补充几个基础知识点,主要都是针对iOS的meta标签: ⑴ 允许全屏浏览页面的标签: <meta name="apple-mobile-web-app-capable" content="yes" /> ⑵ safari顶端状态栏样式定义/隐藏: <meta name="appl…

腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. H5 应用程序缓存为应用带来三个优势: 离线浏览 用户可在应用离线时使用它们 速度 已缓存资源加载得更快 减少服务器负载 浏览器将只从服务器下载更新过或更改过的资源. 根据标准,到目前为止,H5 一共有6种缓存机制,有些是之前已有,…

要掌握的知识点: iphone6 屏幕尺寸为 375*667 (pt)也就是 网页 全屏显示时候 document.documentElement.clientWidth------可以理解为屏幕越大这个值越大(但是像素不一定高) dpr(设备独立像素):2.0   可用(window.devicePixelRatio)得出 (------------像素越高 或者屏幕越小-------dpr越大) window.devicePixelRatio = 物理像素 / dips 屏幕分辨率为 750…

移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放 简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案 在页面中加入viewport.js var doc = window.document, docEle = doc.documentElement, dpr = Math.ceil(window.devicePixelRatio), vp = document.querySelector('meta[name="viewpo…

由于智能机的普及,越来越多网页支持移动端了,那么如何解决适配移动端呢 在这总结一下自己的学习笔记 viewport:虚拟的容器,仅在移动设备有效 <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0"/> width=device-width:设置宽度为设备宽度 initial-scale=1.0:初始缩放比例1.0 user-scala…

新手发帖,很多方面都是刚入门,有错误的地方请大家见谅,欢迎批评指正 本文重要总结一下挪动端进行前端开发时需要用到的一些工具,以及他们之间互相的组合,同时也包含本人应用的组合. 1. Chrome To Mobile PC机上安装该chrome插件:在手机端安装chrome浏览器,登录chrome, 启用“Chrome 转发至挪动设备服务”:在PC端上输入对应要调试的网址,然后点击发送到手机,则会将该网址发送到手机端.免去了挪动端上输入网址困难的懊恼. 注:ios chrome 与android…

转载于:http://www.w3cfuns.com/notes/24611/fbba9cbd616e795360ea45515494aa53.html meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari 将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式 viewport模板 viewport模板——通用…

移动web和pc端web以及web app 移动web开发跟web前端开发差别很小,使用的技术都是html+css+js.手机网页可以理解成pc网页的缩小版加一些触摸特性.在浏览器中进行的网页开发,最终代码具有跨系统平台的特性. web app开发特指的是用html5技术开发,之所以叫web app是因为它与客户端应用程序很相似,可以和系统深度融合,调用一些只有客户端才能调用的功能(利用html5开发出的网页可以访问电话.相机等功能). 进行移动端web开发要在头部添加这样一段代码 <meta…

一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件 事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题 ​ 移动设备主要特点是不配备鼠标,键盘也只是在需要输入的地方才会激活虚拟键盘.所以以前的pc端事件在移动端使用起来就没有以前那么爽了,虽然部分仍然可以使用. click事件的300ms延迟问题. ​2007年第一代iphone发布,由于那个年代所有的网页都是针对大屏的pc端设计的,iphone的Safari浏览器为了让用户浏览网页的时候…

淘宝SUI Mobile框架   (light7框架 官网:http://www.light7.cn/)官网地址:http://m.sui.taobao.org/ SUI Mobile 是一套基于 Framework7 开发的UI库.它非常轻量.精美,只需要引入我们的CDN文件就可以使用,并且能兼容到 iOS 6.0+ 和 Android 4.0+,非常适合开发跨平台Web App. 轻量的UI库 SUI Mobile 非常轻量,核心库压缩Gzip后的JS.CSS网络传输体积总共只有52K,却提…