移动互联网终端

博客上的小精灵看起来很可耐，用了两年了现在才知道用移动端看的话会挡着屏幕，既然知道了就要改进咯。 判断是pc 还是移动端 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"]; var flag = true; for (var v = 0; v < Agents.length; v++) { if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; } } return flag; } 或者 if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) { //移动端 //TODO } 原文链接： https://www.cnblogs.com/jshare/p/7467023.html 来源： https://www.cnblogs.com/aeolian/p/11645811.html

一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法：　　 PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；　　 移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。 　 在移动端开发中采用静态布局的两种方式：(来自： 流布局与响应式网页设计有什么区别？ ) 　（1）在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。（见 前端开发-web app 变革之rem ） 　（2）设在viewport meta标签上设置content"width=640,user-scalable=no，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。（具体见 content"width=640

㈠概念 ⑴ 静态布局 ：给页面元素设置固定的宽度和高度，单位用px，当窗口缩小，会出现滚动条，拉动滚动条显示被遮挡内容。针对不同分辨率的手机端，分别写不同的样式文件。例如：浏览器窗口是1000px，那么最小的宽度是900px或其他px,只要浏览器缩小过这个最小值就不会自动化的调整。 ⑵ 自适应布局 ：创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，使用@media媒体查询技术。但是字体不会改变 ⑶ 流式布局 ：rem布局+viewport;元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。屏幕尺度跨度过大的情况下，页面不能正常显示。比如，对移动端来说不错 ⑷ 响应式布局 ：采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。 ⑸ 弹性布局 ：要点在于使用 em和rem单位 来定义元素宽度，与流式布局有极大的相似性，但也有不同之处，主要区别在于弹性布局的尺寸主要根据字体大小而变化。 ㈡布局特点 ⑴静态布局：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 ⑵自适应布局：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。 ⑶流式布局：屏幕分辨率变化时

在PC端，IE9+浏览器对原生视频的支持还是很不错的，然而一到了移动端就会各种兼容性的坑爹问题。 在移动端，各大浏览器厂商对视频会植入许多他们自定义的交互方式（如默认全屏播放、视频不能初始化播放、窗口置顶等等），更坑爹的是这些被植入的交互还无法去掉。移动端的视频行内自动播放看起来确实很棘手。 目前主流有两种方法处理移动端的视频播放问题： 一种是改设计和说服需求方，即使视频不能自动播放或者置顶也不影响页面展示的主要体验； 另一种便是使用canvas来替代video。 看起来，canvas像是完美的，没有浏览器厂商任性的植入属性，任由开发者打扮。但是经我们测试后，其实有些低端的Android手机可能会出现卡顿和动画变糊的情况。如果不考虑一些低端手机，还是很值得实践的。 video转canvas的主要原理，是将视频播放的每一帧都绘制到一个canvas中，这样这个canvas连起来看便像是视频动画了。 为了方便日常开发使用，特意稍微封装了一下video转canvas的工具库，具体代码如下： /* * video视频转成canvas（兼容至IE8+） * Author: Zijor Created On: 2017-06-25 * * 使用方法： * var videoCanvas = new VideoToCanvas(videoDom); * * 对象的属性： * 暂无。 * *

轮播图改进 对循环效果进行改进 结构的改进：需要在ul内最后设置一个假的第一张图 克隆节点操作 格式： 节点.cloneNode() 参数：默认false 浅克隆 ​ true，深克隆 因为ul在样式中设置了宽度，需要修改为700% 操作的改进：当假的第一张显示时，再次点击右按钮，立刻将ul抽回到第一张显示的位置，再继续滚动 左按钮的操作与右按钮同理 移动端事件 移动端事件同一使用addEventListener() touchstart 手指刚触摸到屏幕时触发的事件 touchmove 手指在屏幕上移动时触发（不能松手） touchend 手指离开屏幕时触发 手指的信息获取方式 在touch相关事件中，先获取事件对象event event中具有三个属性，用来获取手指信息 touches 获取屏幕上的所有手指信息 targetTouches 某个元素上的手指信息 changeTouches 状态改变的手指信息 推荐使用的方式： touchstart： 推荐使用touches或者targetTouches 平常都用touches 如果发现效果只能被某个执行元素操作，就用targetTouches touchmove和touchend： 推荐使用changedTouches 注意：不要直接写 e.clientX 要写成 e.touches[0].clientX 移动端的手势

H5新增了电子邮箱，手机号码，网址，数量，搜索，范围，颜色选择，时间日期等input类型 1.电子邮箱 type="email" 提供电子邮箱格式验证 如果格式不对，会阻止表单提交 <div> <label for="email">电子邮件</label> <input type="email" id="email"> </div> 2.手机号码 type="tel" 并非用来验证手机号码，而是用来在移动端浏览器调用数字键盘 <div><label>电话:<input type="tel" name="userTel"></label></div> 3.网址 type="url" 验证只能输入合法的网址，且必须包含Http:// <div><label>网址:<input type="url" name="userUrl"></label></div> 4.数量 type="number" 只能输入数字不能输入其他字符,在pc端获取焦点时有上下箭头点击可以加减值 可以设置最大值和最小值,超出范围会阻止提交 <div> <label>数量:<input type="number" name="userNumber" max="100" min="0"></label> </div> 5.搜索 type="search" PC端获取焦点时输入框的右边有个一"X"

背景 我们开发微信或者移动端的混合开发时，需要在移动端看到效果，但时候有的时候会出现意想不到的结果，这时候需要我们像是在chrom或者其它浏览器中调试了，但是移动端的又没法像浏览器那样按F12调试，这时候我们就不知道该怎么办才好，想着要是移动端浏览器或者微信内嵌浏览器要是能调试就好了，之前我们的APP使用混合开发，在安卓显示一切正常，但是在苹果上不显示，而且后台访问正常就是不现实，干着急没办法。网上找了很多的解决方法都不见效，突然有一天在访问别人的博客的时候发现了spy-debugger神器，顺利的用移动端当成pc的浏览器那样调节样式了！ 下载安装spy-debugger 访问 spy-debugger的github地址 ,注意前提是安装了node.js windows下安装 npm install spy-debugger -g mac下安装 sudo npm install spy-debugger -g 快速上手 1.使手机和电脑处于同一个网络下(例如连接到同一个WIFI下) 2.命令行输入 ==spy-debugger==，按命令行提示用浏览器打开相应地址。 3.设置手机的HTTP代理，代理IP地址设置为PC的IP地址，端口为spy-debugger的启动端口(默认端口：9888)。 Android设置代理步骤：设置 - WLAN - 长按选中网络 - 修改网络 - 高级

Fiddler和app抓包 1：请在“运行”，即下面这个地方输入certmgr.msc并回车，打开证书管理。 打开后，请点击操作--查找证书，如下所示： 然后输入“fiddler”查找所有相关证书，如下所示： 可以看到，我们找到一个，您可能会找到多个，不要紧，有多少个删多少个，全删之后，这一步完成 2：再接下来，打开火狐浏览器，进入选项-高级-证书-查看证书，然后找以DO_NOT开头的关于Fiddler的证书，以字母排序的，所以你可以很快找到。找到多少个还是删除多少个， 特别注意，请如图中【个人、服务器、证书机构、其他】等标签依次查找，以免遗漏，切记切记！ 3：下载 FiddlerCertMaker.exe，可以去官网找，下载了这个之后，直接安装，直到如下 然后点击确定，关掉它。 4：有了证书之后，请重启Fiddler（关掉再开），重启之后，访问https的网站，比如淘宝首页，有可能成功了，但你也有可能会发现如下错误："你的连接并不安全" 等类似提示。见到这里，你应该开心，离成功近了。 5：果断的，打开fiddler，“Tools--Fiddler Options--HTTPS”，然后把下图中同样的地方勾上（注意一致），然后点击actions，然后先点击Trust Root…，然后，再点击Export Root…，此时，导出成功的话，在桌面就有你的证书了。 务必注意：这一步成功的话

做网页时，需要得到当前打开网页页面的设备是PC的浏览器，还是移动设备的浏览器，再针对不同设备，让页面显示合适内容； 针对这个需求场景，个人认为有三种方法可以实现： 方法一： 通过css ； 方法二，通过js； 方法三 通过 php端； 这三种方法按业务需求，进行采用，会有不一样的效果； css 通过 @media 属性 ，设置不一样屏幕尺寸 显示不一样的页面；达到页面匹配不同尺寸的效果； 通过js 判断设备是移动设备，pc设备、微信客户端等，再做对应的跳转到合适的业务页面展示给客户端； 方式三，通过php端判断 访问的设备是 pc还是移动设备； 后端返回 不一样的业务内容； 个人觉得方式三 适合复杂的，业务需求。 下面就 提供一个 php端 判断设备的代码吧。 /** * 是否移动端访问访问 */ public function _is_mobile() { if (isset ($_SERVER['HTTP_X_WAP_PROFILE'])) { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 return true; } elseif (isset ($_SERVER['HTTP_USER_AGENT'])) { // 判断手机发送的客户端标志,兼容性有待提高 $clientkeywords = [ 'nokia', 'sony', 'ericsson',

这个作业属于哪个课程 课程链接 这个作业要求在哪里 作业要求 这个作业的目标 学会分析需求，学会原型设计，理想项目流程 一、3款原型软件的对比及使用体验 墨刀 优点： 支持拖拽，各种事件交互逻辑比较清楚，易上手 基础模板比较全面（我用的免费版就觉得还算比较全面了） 可以分享链接 缺点： 模板之间不能互联 需要付费才能使用更多功能 Axure PR 优点： 功能强大，交互多样 缺点： 素材较少 付费才能使用 使用起来复杂 mockplus 优点： 简单快捷 性价比高 缺点： 素材较少 功能简单 二、选题与需求分析 1. 选题：社团管理 项目需求如下： 面向普通学生和社团管理员，集合了各个社团的信息，特色功能是活动的浏览和报名，以及活动的发布、审核与通知，同时还具有加入社团、发送站内信等功能。 项目背景和解决的痛点： 学生刚入西南石油大学时缺乏了解社团的长期的、便利的渠道；社团公众号文章分散各处；群里发的活动报名问卷容易被水过去，而且每次要填的信息都差不多。 社团管理员在管理社员时没有一个很好的工具，来发布活动、统计报名人员、通知活动变更等。 社联在管理所有社团时，在审核活动申请、审核场地申请、星级评定、材料收取等方面也存在一些困难。 因此，我们希望能打造一款软件连接学生、社团和社联，根据用户不同的使用需求，我们计划给将社团展示、活动报名等功能放在手机小程序端