移动互联网终端

Fiddler 使用 一、主界面各面板的功能 Fiddler的主界面分为 工具面板、会话面板、监控面板、状态面板 1、 工具面板 两种模式 缓冲模式（ Buffering Mode）Fiddler直到HTTP响应完成时才将数据返回给应用程序。可以控制响应，修改响应数据。但是时序图有时候会出现异常 流模式（ Streaming Mode）Fiddler会即时将HTTP响应的数据返回给应用程序。更接近真实浏览器的性能。时序图更准确,但是不能控制响应。 2、 会话面板 3、 监控面板 <1> Statistics--- 统计 请求总数、请求包大小、响应包大小。 请求起始时间、响应结束时间、握手时间、等待时间、路由时间、 TCP/IP、传输时间。 HTTP状态码统计。 返回的各种类型数据的大小统计以及饼图展现。 <2> Timeline--- 时间轴 每个网络请求都会经历域名解析、建立连接、发送请求、接受数据等阶段。把多个请求以时间作为 X 轴，用图表的形式展现出来，就形成了瀑布图。在Fiddler中，只要在左侧选中一些请求，右侧选择Timeline标签，就可以看到这些请求的瀑布图 4、 状态面板 控制台 Fiddler的左下角有一个命令行工具叫做QuickExec,允许你直接输入命令。 常见得命令有： 命令 解释 help 打开官方的使用页面介绍，所有的命令都会列出来 cls 清屏

1.什么是视口? 视口简单理解就是可视区域大小我们称之为视口 在PC端，视口大小就是浏览器窗口可视区域的大小（窗口多大，可视区域/视口就多大） 在移动端, 视口大小并不等于窗口大小, 移动端视口宽度被人为定义为了980 2.为什么是980而不是其他的值? 因为过去网页的版心都是980 乔布斯为了能够让网页在移动端完美的展示, 所以将iOS手机视口的大小定义为了980 后来谷歌也觉得这是一个非常牛X的方案, 所以Android手机的视口也定义为了980 3.移动端自动将视口宽度设置为980带来的问题——内容被缩小 虽然移动端自动将视口宽度设置为980之后让我们可以很完美的看到整个网页 但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的 所以为了能够在较小的范围内看到视口中所有的内容, 那么就必须将内容缩小 4.如何保证在移动端不自动缩放网页的尺寸?——视口大小同可视区域大小 通过meta设置视口大小 width=device-width 设置视口宽度等于设备的宽度 initial-scale=1.0 初始缩放比例, 1不缩放 maximum-scale：允许用户缩放到的最大比例 minimum-scale：允许用户缩放到的最小比例 user-scalable：用户是否可以手动缩放，手指缩放 注意点：以上属性有可能在模拟器上无用，需要真机测试 来源： https://blog

https://cloud.tencent.com/developer/article/1367850 本文引用了腾讯工程师廖伟健发表于“鹅厂网事”公众号上的《【鹅厂网事】全局精确流量调度新思路-HttpDNS服务详解》一文部分内容，感谢原作者的分享。 1、引言 对于互联网，域名是访问的第一跳，而这一跳很多时候会“失足”（尤其是移动端网络），导致访问错误内容、失败连接等，让用户在互联网上畅游的爽快瞬间消失。 而对于这关键的第一跳，包括鹅厂在内的国内互联网大厂，都在持续深入地研究和思考对策，本文将就鹅厂团队在这一块的技术实践，做一个深度的总结和技术分享，希望给大家带来些许启发。 学习交流： - 即时通讯/推送技术开发交流4群： 101279154 [推荐] - 移动端IM开发入门文章：《 新手入门一篇就够：从零开发移动端IM 》 （本文同步发布于： http://www.52im.net/thread-2121-1-1.html ） 2、相关文章 《 网络编程懒人入门(一)：快速理解网络通信协议（上篇） 》 《 网络编程懒人入门(二)：快速理解网络通信协议（下篇） 》 《 网络编程懒人入门(六)：史上最通俗的集线器、交换机、路由器功能原理入门 》 《 网络编程懒人入门(七)：深入浅出，全面理解HTTP协议 》 《 网络编程懒人入门(九)：通俗讲解，有了IP地址，为何还要用MAC地址？

移动端页面布局的那些事儿 http://www.xiaoxiangzi.com/Programme/CSS/4298.html 一. viewport 什么是viewport 简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport。如今的浏览器，都会给自己的本身提供一个viewport的默认值，可能是980px，或者是其他值。就以手机来说吧，目前，新版本的手机浏览器，绝大部分是以980px作为默认的viewport值的。我这里对新版本的不同平台下的浏览器做了测试，经过测试，iphone下的默认viewport为980px，安卓下的浏览器，目前主流的最新浏览器（比如chrome，还有很多国产的像qq，uc）的viewport也是980px了。 viewport是用来干什么的 viewport的默认值，一般来说是大于手机屏幕的。这样就可以做到当我们在浏览桌面端网页的时候，可以让桌面端端网页正常显示（我们普通页面设计的时候，一般页面的主区域是以960px来做的，所以980px这个值，可以做到桌面端网页的正常显示）。但是，其实我们手机的屏幕宽度是没有960px的，因此浏览器会出现横向滚动条。同时

http://www.xiaoxiangzi.com/Programme/CSS/4298.html 前言的一些碎碎念：最近一直在写移动端的页面，不过一直是用的别人造好的轮子，很多时候并没有想那是为什么，那是怎么样要那么写，就跟着别人的文档 去了。本以为自己对移动端的那一丢丢理解，结果很多东西都特么有问题，所以，今天停下了手中的一些东西，来谈下移动端的布局方案吧 内容有些长，这也是我第一次写博客，不足之处还请严厉指出 一. viewport 什么是viewport 简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机 宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport。如今的浏览器，都会给自己的本身提供一个 viewport的默认值，可能是980px，或者是其他值。就以手机来说吧，目前，新版本的手机浏览器，绝大部分是以980px作为默认的 viewport值的。我这里对新版本的不同平台下的浏览器做了测试，经过测试，iphone下的默认viewport为980px，安卓下的浏览器，目 前主流的最新浏览器（比如chrome，还有很多国产的像qq，uc）的viewport也是980px了。 viewport是用来干什么的 viewport的默认值

转自 --- 一. viewport 什么是viewport 简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport。如今的浏览器，都会给自己的本身提供一个viewport的默认值，可能是980px，或者是其他值。就以手机来说吧，目前，新版本的手机浏览器，绝大部分是以980px作为默认的viewport值的。我这里对新版本的不同平台下的浏览器做了测试，经过测试，iphone下的默认viewport为980px，安卓下的浏览器，目前主流的最新浏览器（比如chrome，还有很多国产的像qq，uc）的viewport也是980px了。 viewport是用来干什么的 viewport的默认值，一般来说是大于手机屏幕的。这样就可以做到当我们在浏览桌面端网页的时候，可以让桌面端端网页正常显示（我们普通页面设计的时候，一般页面的主区域是以960px来做的，所以980px这个值，可以做到桌面端网页的正常显示）。但是，其实我们手机的屏幕宽度是没有960px的，因此浏览器会出现横向滚动条。同时，即使是基于980的viewport，我们在移动端浏览我们的桌面页面的体验其实也并不好，所以，一般的

1.滚动条默认是在html上的，移到body上 html{ width: 100%; height: 100%; overflow: hidden; } body{ width: 100%; height: 100%; overflow: auto; } 2.高清屏1px边框还原 //因为像素比是放大的，缩放比可以缩小，只要相乘为1就能得到1px var pixelRatio = 1 / window.devicePixelRatio; //通过js动态设置视口的缩放比 document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + pixelRatio + ', maximum-scale=' + pixelRatio + ', minimum-scale=' + pixelRatio + ', user-scalable=no'); // 在devicePixelRatio = 3 时==> <meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0

移动端 宽度千万不要用 px ，除非以下必要情况： 1. 是固定像素的，比如两边固定宽度，中间自适应宽度 2. 缩放图片（ img,background ）等 高度能不给死就不给死，高度可以用 px 两端固定像素，中间自适应原理 ： 两端脱标，中间 100% 宽，用 padding 或者 margin （用 margin 时宽度和 margin 都要用百分比表示） 留出两边空间，然后两边定位，或者浮动上去。 移动端web是以百分比布局为主的 定最小宽度和最大宽度为辅的布局。 换句话说：就是所有元素有宽的都是百分比设宽度，没有的都是设置 min-width和max-width来达到自适应的目的 来源： https://www.cnblogs.com/ycxqdkf/p/10385028.html

一、流式布局 1、 什么是流式布局 流式布局就是 百分比布局 ，通过盒子的 宽度 设置成 百分比 来 根据屏幕的宽度来进行伸缩 ，不受固定像素的限制，内容向两侧填充，同时会 设定最小宽度 和 最大宽度 ，适用于图片比较多的 首页、门户、电商 等。 在这里我们以京东的M站为例进行说明： 可以看到，在京东各个模块的主容器中，都设置了最大最小宽度和宽度100%，而在导航区块中，由于一行有5个小区块，所以设置了宽度为20%，使得小区块也能达到自适应的效果。 2、 viewport 在移动端用来承载网页的这个区域就是我们的 视觉窗口 viewport ，这个区域可以设置 高度宽度 ，可以按比例放大缩小，而且能设置 是否允许用户自行缩放 。 width ：设置的是 viewport 宽度，可以设置 device-width 特殊值。 initial-scale ：初始缩放比，大于0的数字，一般设置为1.0。 maximum-scale ：最大缩放比，大于0的数字。 minimum-scale ：最小缩放比，大于0的数字。 user-scalable ：用户是否可以缩放，yes或no（1或0）。 <!--视口标签通可以使用 meta:vp + tab 来快速生成，通常我们可以设置为下边这样。--> <meta name="viewport" content="width=device-width

要实现手机访问本地开发的移动端项目，首先做到两点： 1、本地打开的项目可以使用本地ip访问 2、手机和电脑同时处于一个同一个局域网中（手机和电脑同时连上同一个wifi / 手机开热点给电脑 / 电脑开wifi给手机连接） 如果做到以上两点，那么恭喜你，就可以直接使用电脑ip在移动端访问了。 因为现开发项目是angular + ionic项目，所以以下设置及开发均以angular项目为基础进行设置。下面先来解决第一个难题： 一、angular项目配置可同时使用localhost和本地ip访问，步骤如下： step1: 找到此文件“node_modules/webpack-dev-server/lib/Server.js”，按照下图修改 将return false 修改为return true; step2： 修改配置文件package.json step2: 重启项目 到此为止就可以直接使用本机IP:4200或者localhost:4200访问项目啦。 现在第一个问题问题解决了，那么接下来看看如何通过移动端访问本地angualr项目。上面已经说了，需手机和电脑在同一个局域网内，介绍了三种方法，现仅以电脑开wifi给手机连接为例进行讲解，其他两种方式设置类似。 二、手机连接电脑测试本地开发的移动端页面 step1:关闭电脑防火墙 或者80端口允许连接; 设置方法: 打开控制面板