- 综合排序
- 最热优先
- 最新优先
- 来自专栏睡不着所以学编程
移动端笔记(8)之bootstrap案例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-<em>8</em>"> <meta http-equiv="X-UA-Compatible
50521编辑于 2022-09-20 - 来自专栏全栈程序员必看
java移动端开发_移动端开发
1.移动端视口问题 视口是指浏览器的可视区域，移动端的视口到底是多宽呢？ 现在市面上的大部分手机，比如iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。 (注：实际上，这里说的375像素不是真实的物理像素，至于这个375像素是怎么来的，以及为什么大部分移动端的默认视口宽度是980，这就是另一个更加复杂的话题了，在此我们先不做讨论。) 我们可以使用谷歌浏览器的移动端调试工具，来访问百度的搜索结果，可以看到网页明显被缩小了，而且页面宽度定格在980px(不信的话大家可以试试)。 3.移动端尺寸 是同一个网页在不同尺寸手机中的效果。 注意：在移动端，如果使用了背景图(比如雪碧图)，记得用同样的方式调整背景图的尺寸。 题外话：移动端看上去是不是很麻烦？视口那么小，还要引入各种东西，里面要添加的又杂又乱，还要计算数值，是不是很麻烦？
6.4K20编辑于 2022-09-12 - 来自专栏韩曙亮的移动开发专栏
【移动端网页布局】移动端网页布局基础概念 ① ( 移动端浏览器 | 移动端屏幕分辨率 | 移动端网页调试方法 )
一、移动端浏览器 ---- 移动端浏览器 比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 , 常见的浏览器如下 : UC / QQ / Opera / Chrom / 360 / 百度 / 搜狗 / 猎豹 国内的浏览器 基本都是 根据 Webkit 内核进行修改而来的 , 目前没有自主研发的内核 , 因此 移动端开发适配比较简单 , 兼容主流的浏览器 , 即兼容 Webkit 内核浏览器即可 ; 二、移动端屏幕分辨率 ---- 移动设备的尺寸类型非常多 , Android / iOS 手机分辨率种类很多 , 参考 Android 屏幕适配 专栏 ; 【Android Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI ) 博客 ; 前端开发时 , 不需要关注上述 屏幕像素密度 dpi , 密度无关像素 dp , 只需要关注 像素尺寸 px 即可 ; 三、移动端网页调试方法
3.5K40编辑于 2023-04-24 - 来自专栏老马寒门IT
10-移动端开发教程-移动端事件
在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1. PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素，所以网页文字非常小，为了快速让网页还原到原来的大小，Safari最新引入了双击缩放功能 移动端特有的touch事件 由于移动端设备大都具备触摸功能，所以移动端浏览器都引入了触摸(touch)事件。 8. target 总是表示 手指最开始放在触摸设备上的触发点所在位置的 element。 封装移动端tap事件 由于点击事件经常使用，如果用click会有延迟问题，一般我们会用touch事件模拟移动端的点击事件, 以下是封装的几个事件，仅供参考。
8.2K80发布于 2018-02-18 - 来自专栏老马寒门IT
10-移动端开发教程-移动端事件
在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1. PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素，所以网页文字非常小，为了快速让网页还原到原来的大小，Safari最新引入了双击缩放功能 移动端特有的touch事件 由于移动端设备大都具备触摸功能，所以移动端浏览器都引入了触摸(touch)事件。 8. target 总是表示 手指最开始放在触摸设备上的触发点所在位置的 element。 封装移动端tap事件 由于点击事件经常使用，如果用click会有延迟问题，一般我们会用touch事件模拟移动端的点击事件, 以下是封装的几个事件，仅供参考。
7.6K70发布于 2018-04-08 - 来自专栏嵌入式、安防、流媒体、AI分析
视频监控平台GB28181：移动位置订阅
文章目录 前言 订阅 移动位置通知 取消订阅 流程图 技术交流 前言 本片博文适用于GB28181-2016版本，在2016版本中移动位置(GPS)是新增的协议，协议中对移动位置订阅的描述不是太清晰，下面介绍一下移动位置订阅的大致流程 </CmdType> <SN>51</SN> <DeviceID>15000000001310000001</DeviceID> <Interval>3</Interval> </Query> 移动位置通知
1.3K10编辑于 2023-01-04 - 来自专栏h5学习笔记
移动端基础
移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一 1、移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 搭建本地 在标准viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题 背景图片注意缩放问题 开发中需要用多倍图，比如需要放一个50*50px的图片，直接放到iphone8里 4.1单独移动端页面（主流） 通常情况下，网址域名前面加m（mobile）可以打开移动端。 通过设备判断，如果是移动端打开，则自动跳转到移动端页面。 ，需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 5.1移动端浏览器 移动端浏览器基本以webkit内核为主，所以就考虑webkit兼容性问题。
2.7K20发布于 2020-09-30 - 来自专栏全栈自学笔记
移动端基础
移动端基础 移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一 1.移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC端页面1px就等于1个物理像素，但移动端不同 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比 3.2 4.1单独移动端页面（主流） 通常情况下，网址域名前面加m（mobile）可以打开移动端。 通过设备判断，如果是移动端打开，则自动跳转到移动端页面。 ，需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 1.移动端浏览器 移动端浏览器基本以webkit内核为主，所以就考虑webkit兼容性问题。
2.4K10编辑于 2022-05-08 - 来自专栏超超不会飞
移动端适配
实习期间主要在写微信端H5，遇到的最大问题就是适配各个不同尺寸的屏幕。公司就我自己一个前端，只能自己摸索着来。
2.7K20发布于 2020-09-18 - 来自专栏前端学习笔记
移动端基础
移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一 1.移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC端页面1px就等于1个物理像素，但移动端不同 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比 3.2 4.1单独移动端页面（主流） 通常情况下，网址域名前面加m（mobile）可以打开移动端。 通过设备判断，如果是移动端打开，则自动跳转到移动端页面。 ，需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 1.移动端浏览器 移动端浏览器基本以webkit内核为主，所以就考虑webkit兼容性问题。
2.1K31发布于 2020-10-26 - 来自专栏Kirin博客
vue 判断移动端、pc端
判断移动端或pc端 经常在项目中会有支持 pc 与手机端需求。并且pc与手机端是两个不一样的页面。这时就要求判断设置，根据不同的设置跳转不同的路由。 先写个方法： ? _isMobile()) { alert("移动端"); //移动端跳转路由 } else { alert("pc端"); //Pc端跳转路由
4.1K30发布于 2021-01-04 - 来自专栏韩曙亮的移动开发专栏
【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )
一、移动端页面布局方案 移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端 与 移动端 访问的是不同的页面 , 目前的 京东 / 淘宝 等电商网站移动端页面采取的该方案 ; 响应式页面兼容移动端 : 开发难度较大 , PC 端与移动端访问的是相同的页面 ; 1、单独制作的移动端页面 通过设备类型判断要加载的网页类型 , 一般会在域名前添加 m 打开移动端 , 如京东域名为 jd.com , 使用 m.jd.com 可以访问其移动端页面 ; 如京东商场 , 在浏览器中输入 https://www.jd.com/ 域名 , 进入的是 PC 端的网页 , 在浏览器中 , 按 F12 进入调试模式 , 选择手机设备调试 , 输入 https://www.jd.com/ 域名 , 会自动跳转到 https://m.jd.com/ 手机端页面中 , 京东后台会认为是移动设备请求页面 , 自动跳转到移动端页面 ; 2、响应式页面兼容移动端 响应式页面兼容移动端 的原理是 通过 判断当前的 屏幕宽度 , 改变当前的页面样式 , 适应不同的设备 ; 如果不断地缩小浏览器的窗口的宽度 , 网页会不停地自适应修改布局
4.4K40编辑于 2023-04-24 - 来自专栏老马寒门IT
08-移动端开发教程-移动端适配方案
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. 优点：布局快速简单方便、在移动设备中水平表现良好差异不大。 缺点：由于垂直方向像素恒定，可能水平很宽的屏幕会被拉伸变形严重，另外在高倍屏幕上1像素可能被多倍的物理像素显示，会变的非常粗。 2.1 横向百分比 + 纵向高度固定 首先看案例： 拉勾网移动端首页顶部的logo区域，不管如何变化浏览器的宽度，高度不变化，宽度自适应。 这样优点非常多，首先开发人员直接像素还原，开发效率很高，也没有移动端1像素的问题。也是老马推荐大家使用的方式。
4.2K100发布于 2018-02-18 - 来自专栏老马寒门IT
08-移动端开发教程-移动端适配方案
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. 优点：布局快速简单方便、在移动设备中水平表现良好差异不大。 缺点：由于垂直方向像素恒定，可能水平很宽的屏幕会被拉伸变形严重，另外在高倍屏幕上1像素可能被多倍的物理像素显示，会变的非常粗。 2.1 横向百分比 + 纵向高度固定 首先看案例： 拉勾网移动端首页顶部的logo区域，不管如何变化浏览器的宽度，高度不变化，宽度自适应。 ? 这样优点非常多，首先开发人员直接像素还原，开发效率很高，也没有移动端1像素的问题。也是老马推荐大家使用的方式。
3.5K60发布于 2018-04-02 - 来自专栏太阳影的学习记录
移动端Mesh限制
Skinned Mesh虽然这里写死了限制最多75个骨骼，实际上可以通过修改引擎源代码来放宽限制：
96020发布于 2021-10-15 - 来自专栏IMWeb前端团队
移动端动画方案
本文作者：IMWeb 袁飞翔 原文出处：IMWeb社区 未经同意，禁止转载 前言 花样直播项目客服端的动画基本已都使用web来做，总结分享一下 方案列表 css3动画 canvas 动画 播图片 最初想用觉得完美，但性能问题被测试叼得不行，之后加班加点换播图片 播图片 优点：能够解决一切性能、复杂度的问题 缺点： 因为每一帧都需要一张图片，加载资源较多，不适合持续时间长、尺寸大的动画 注意点：动画的帧率８帧 案例： 花样直播爵位升级动画 结尾 具备离线包功能的客服端，尽量使用播图片方案。否则性能问题是一个很难踏过的大坑
1.1K20发布于 2019-12-04 - 来自专栏测试技术干活
APP移动端测试
一、问：app测试与web测试的区别参考答案：1）、系统架构：web端的服务器更新后，客户端会自动同步更新；如果是app下修改了服务端，意味着客户端用户所使用的核心版本都需要进行回归测试一遍；2）、兼容性 Web端要考虑不同的浏览器内核进行测试（IE、chrome、Firefox），APP的兼容性要考虑选择主流的机型，不同的分辨率、尺寸， 以及不同的操作系统；3）、性能：APP客户端的性能，要考虑电量，流量 七、问：App的性能测试怎么做的参考答案：App的性能分为服务器端的性能和手机端的性能。我先说服务器端的性能，再说手机端的性能。 服务器端的性能，我们可以用LoadRunner或Jmeter工具进行测试，我以Jmeter工具为例子说一下App服务器端的性能测试，首先，确定app的性能测试功能点，比如，查询，提交数据，登陆这些用户常用的功能 功能测试：xxxx兼容性测试：xxxx用户体验测试：xxxx（补上app的8大测试点，并举例子说明）
2.3K30编辑于 2023-03-21 - 来自专栏web前端
02移动端布局
一、rem 1、意义：当px固定宽度不能适应不同屏幕尺寸时，布局需要，从而产生rem 2、rem 和 em 区别 2.1 rem: root，以根节点（html）作为参照的尺寸 2.2 em: 根据父级font-size确定大小 1em = 1font-size（父级的 ） 3、随着屏幕宽度的变化，改变HTML根元素font-size，从而控制rem值，从而达到相应效果（其他HTML子元素width等都是rem） functi
1.1K90发布于 2018-01-09 - 来自专栏全栈自学笔记
移动端轮播图
移动端常见特效 1.1 案例: 移动轮播图 移动端轮播图功能和基本PC端一致。 可以自动播放图片 手指可以拖动播放轮播图 1.2. 案例分析: 自动播放功能 开启定时器 移动端移动，可以使用translate 移动 想要图片优雅的移动，请添加过渡效果 // 1. ，简单说就是移动端拖动元素 触摸元素touchstart： 获取手指初始坐标 移动手指touchmove： 计算手指的滑动距离，并且移动盒子 离开手指touchend: 根据滑动的距离分不同的情况 如果移动距离小于某个像素 就回弹原来位置 如果移动距离大于某个像素就上一张下一张滑动。 移动手指 touchmove: 计算手指的滑动距离，并且移动盒子 ul.addEventListener("touchmove", function (e) { // 计算移动距离
1.6K20发布于 2020-10-27 - 来自专栏九彩拼盘的叨叨叨
移动端代码库
源码地址: https://github.com/iamjoel/mobile-codes-collection 。感兴趣的 Star 下哦，也欢迎 Pull Request~
1K30发布于 2018-10-10
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号