首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏老马寒门IT

    10-移动开发教程-移动事件

    在前端的移动Web开发中,有一部分事件只在移动产生,如触摸相关的事件。接下来给大家简单总结一下移动的事件。 1. PC事件在移动的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能 移动特有的touch事件 由于移动设备大都具备触摸功能,所以移动浏览器都引入了触摸(touch)事件。 封装移动tap事件 由于点击事件经常使用,如果用click会有延迟问题,一般我们会用touch事件模拟移动的点击事件, 以下是封装的几个事件,仅供参考。 ---- 参考文章: 移动web开发---Touch事件详解 MDN:TouchEvent 移动前端常见的触摸相关事件touch、tap、swipe等整理

    8.2K80发布于 2018-02-18
  • 来自专栏老马寒门IT

    10-移动开发教程-移动事件

    在前端的移动Web开发中,有一部分事件只在移动产生,如触摸相关的事件。接下来给大家简单总结一下移动的事件。 1. PC事件在移动的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能 移动特有的touch事件 由于移动设备大都具备触摸功能,所以移动浏览器都引入了触摸(touch)事件。 封装移动tap事件 由于点击事件经常使用,如果用click会有延迟问题,一般我们会用touch事件模拟移动的点击事件, 以下是封装的几个事件,仅供参考。 ---- 参考文章: 移动web开发---Touch事件详解 MDN:TouchEvent 移动前端常见的触摸相关事件touch、tap、swipe等整理

    7.6K70发布于 2018-04-08
  • 来自专栏全栈程序员必看

    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
  • 来自专栏全栈自学笔记

    移动基础

    移动基础 移动浏览器我们主要针对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学习笔记

    移动基础

    移动浏览器我们主要针对webkit内核进行兼容 现在移动碎片化比较严重,分辨率和屏幕尺寸大小不一 1、移动调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 搭建本地 是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC页面1px就等于1个物理像素,但移动不尽相同 一个px能显示的物理像素点的个数,称为物理像素比或屏幕像素比 4.1单独移动页面(主流) 通常情况下,网址域名前面加m(mobile)可以打开移动。 通过设备判断,如果是移动打开,则自动跳转到移动页面。 ,需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动技术解决方案 5.1移动浏览器 移动浏览器基本以webkit内核为主,所以就考虑webkit兼容性问题。

    2.7K20发布于 2020-09-30
  • 来自专栏超超不会飞

    移动适配

    实习期间主要在写微信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. 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值:根据页面的dpr动态改变 Rem的取值: 1rem = 100px 或者 1rem = 1/10 2.1 横向百分比 + 纵向高度固定 首先看案例: 拉勾网移动首页顶部的logo区域,不管如何变化浏览器的宽度,高度不变化,宽度自适应。 space-between; line-height: 40px; } </style>

    10 这样优点非常多,首先开发人员直接像素还原,开发效率很高,也没有移动1像素的问题。也是老马推荐大家使用的方式。

    4.2K100发布于 2018-02-18
  • 来自专栏老马寒门IT

    08-移动开发教程-移动适配方案

    由于移动的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC要做一些基层的适配方案。 1. 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值:根据页面的dpr动态改变 Rem的取值: 1rem = 100px 或者 1rem = 1/10 2.1 横向百分比 + 纵向高度固定 首先看案例: 拉勾网移动首页顶部的logo区域,不管如何变化浏览器的宽度,高度不变化,宽度自适应。 ? space-between; line-height: 40px; } </style>

    10 这样优点非常多,首先开发人员直接像素还原,开发效率很高,也没有移动1像素的问题。也是老马推荐大家使用的方式。

    3.5K60发布于 2018-04-02
  • 来自专栏机器之心

    资源 | 一文盘点10移动机器学习框架

    选自hopinfirst.com 作者:James Tredwell 机器之心编译 参与:路雪、黄小天 本文介绍了适用于移动10 个机器学习框架,包括针对计算机的机器学习框架和针对手机的优化性能的框架 这就是为什么本文列表分为两部分:针对计算机的更强大的机器学习框架和针对移动的优化性能的框架。 计算机机器学习框架 该列表包含运行在适当硬件上的一般框架,可以处理海量的数据集。 MXNet MXNet 是该列表中的第一个 Apache 项目;它是一个有前景、活跃的框架,可应用于移动,即你可以在任何安卓或 iOS 设备上训练数据、运行计算集(computed set),该框架也可在 移动机器学习框架 谷歌 TensorFlow Lite 目前最完整的免费移动解决方案就是 TensorFlow Lite,它最初适用于安卓机,不过一些人也在 iOS 设备上实现了该框架。 其主要特征是移动部署,允许开发者在手机上实时运行不同的神经网络计算。 Bender 该框架很有前景,使用了不同的方法和苹果自己的 Core ML。

    1.2K40发布于 2018-05-09
  • 来自专栏call_me_R

    10 步开启一个成功的 Flutter 移动应用

    原文链接:10 Steps to a Successful Flutter Mobile App Launch - 原文作者 Vlad Prudnikov 本文采用意译的方式 在快速发展的数字化时代 ,开发一个移动的应用不再是单纯的编码和测试。 我们在进入怎么开启一个移动应用话题前,先来了解为什么 Flutter 正在成为开发者社区的宠儿。 创建个强大的应用程序启动策略 为了有效开启移动应用,我们需要了解 Flutter 技术的多个方面。它需要对目标市场有清晰的愿景,对用户期望有深入理解,以及为我们应用程序有战略努力。 10. 培养社区 建立和培养一个用户社区可以引导一个更好用户参与,让用户提供有价值的反馈,宣传我们的应用程序,并促进积极的应用文化。这可能需要内置社区特性的方式,社交媒体组织,用户论坛或者线下会议。

    70610编辑于 2024-05-04
  • 来自专栏技术社区

    移动调试vConsole

    通过vConsole.js 重写console方法,实现了类似于微信小程序的移动调试效果。

    2K50编辑于 2022-06-16
  • 来自专栏李维亮的博客

    移动问题总结

    1、移动web页面显示图片在ios下回出现图片透明非常浅的问题,使用如下代码解决: Element{ opacity: 1; } 2、iphone及ipad下输入框默认内阴影 Element{

    77420发布于 2021-07-08
  • 来自专栏grain先森

    移动组件库

    今天给大家推荐的是一个滴滴开源的移动开发组件库:Pile.js。 Pile.js 是滴滴开发的基于 React 的移动开发组件库。 轻量,易用,包含 52 个交互功能,支持多语言与自定义皮肤。

    2.1K20发布于 2019-03-28
  • 来自专栏悟道

    移动布局(最全)

    align-self: auto | flex-start | flex-end | center | baseline | stretch; 移动适配 01.

    2.2K50发布于 2021-01-26
  • 来自专栏生如夏花绚烂

    探讨移动适配

    我们当然不能根据手机屏幕的宽度为标准,而是根据视口的宽度 可以看到视口的宽度为980px 那么900px的盒子在750px的盒子正常显示也就不足为怪了,而且每个手机默认的视口宽度都是980px,这是为了让pc的网页也能在移动完整展示 如果pc网页超过了980px那么移动浏览器会对网页进行缩放以正常显示 通过结合上面的规律我们得出,视口小于物理像素时,页面展示的元素会放大,视口大于物理像素时元素会缩小。 这就是pc网页没有做移动适配的情况下,在移动看上去会非常的小,我们要通过缩放才能正常浏览网页,当然这个体验并不是很好 这也就是我们常说的布局视口 完美视口(理想视口) 默认情况下 移动的像素比为 980/移动宽度 布局视口带来的问题是 如果我们直接在网页中编写移动代码,在980的视口下像素比是非常不友好的 也就是 1px =0.几物理像素,这样就会导致网页中的内容非常非常小 因此在编写移动页面时 ,必须要确保有一个比较合理的像素比 如 1CSS像素对应2/3个物理像素 问题是我们如何去调整移动的像素比?

    2.2K10编辑于 2022-09-08
  • 来自专栏编程微刊

    jDate移动用法

    前面写过选择年月日的方法,其实也可以用在移动,样式也还算可以,用法与pc类似; 参考demo <!

    90110发布于 2019-11-27
领券