html移动端教程 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

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

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

9K8 0

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

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

8.2K7 0

您找到你想要的搜索结果了吗？

是的

没有找到

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

由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1....优点：布局快速简单方便、在移动设备中水平表现良好差异不大。缺点：由于垂直方向像素恒定，可能水平很宽的屏幕会被拉伸变形严重，另外在高倍屏幕上1像素可能被多倍的物理像素显示，会变的非常粗。...2.1 横向百分比 + 纵向高度固定首先看案例：拉勾网移动端首页顶部的logo区域，不管如何变化浏览器的宽度，高度不变化，宽度自适应。...html {font-size: 100px;} } 以上参考代码的意思是：根据CSS的媒体查询设备的屏幕的宽度，根据宽度的大小设置密集的html根元素的字体大小。...这样优点非常多，首先开发人员直接像素还原，开发效率很高，也没有移动端1像素的问题。也是老马推荐大家使用的方式。

4.5K10 0

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

由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1....优点：布局快速简单方便、在移动设备中水平表现良好差异不大。缺点：由于垂直方向像素恒定，可能水平很宽的屏幕会被拉伸变形严重，另外在高倍屏幕上1像素可能被多倍的物理像素显示，会变的非常粗。...2.1 横向百分比 + 纵向高度固定首先看案例：拉勾网移动端首页顶部的logo区域，不管如何变化浏览器的宽度，高度不变化，宽度自适应。 ?...html {font-size: 100px;} } 以上参考代码的意思是：根据CSS的媒体查询设备的屏幕的宽度，根据宽度的大小设置密集的html根元素的字体大小。...这样优点非常多，首先开发人员直接像素还原，开发效率很高，也没有移动端1像素的问题。也是老马推荐大家使用的方式。

3.8K6 0

移动端兼容系列 HTML与CSS兼容

HTML5学堂：本文，我们将继续为大家总结介绍移动端的常见兼容问题，今天要提的是关于移动端HTML与CSS当中，遇到的一些常见兼容问题，主要包括取消电话号码的识别、取消邮箱识别以及横向rem的问题。...对于移动端的兼容问题，由于内容较多，决定书写成一个系列。在这些杂乱知识的发现与整理，主要来源于几个讲师平时的积累，而自己的学生们也为内容的充实做出了很大的贡献，在此非常感谢~！...移动端兼容 - 取消电话号码识别具体情形：在iPhone上页面中的数字识别为电话号码。...解决方法：在网页文件的文件头部设置如下代码即可： <meta content="telephone=no" name="format-detection" / 移动端兼容 - 取消电子邮箱识别具体情形...具体百分比以及rem的选择，之前写过比较详细的文章，可以查看——>移动端页面的开发方法 - 系列

6.2K6 0

07-移动端开发教程-移动端视口

移动端常见分辨率: [2160*1080, 1920*1080, 1334*750, 1136*640...]...视口问题：PC端设计的网页一般都是大于960px 尺寸，移动端上的浏览器为了能够将那些为PC端设计的网站正常显示，一般都给一个默认的整屏的宽度为980px（css像素），虽然能这样让移动端浏览器兼容大部分...2.2 移动端视口在移动端视口与移动端浏览器屏幕宽度不再相关联，可以比浏览器的可视区域更大或者更小，还可以对页面进行缩放（放大、缩小）。...视觉视口是用户正在看到的网站的区域，对于的javascript属性是window.innerWidth/Height 2.2.2 布局视口（layout viewport）布局视口：在移动端视口与移动端浏览器屏幕宽度不再相关联...布局视口不会受到缩放的影响，缩放不会导致页面重排渲染，对于移动端宝贵的性能来说非常重要。

2.4K8 0

07-移动端开发教程-移动端视口

移动端常见分辨率: [2160*1080, 1920*1080, 1334*750, 1136*640...]...视口问题：PC端设计的网页一般都是大于960px 尺寸，移动端上的浏览器为了能够将那些为PC端设计的网站正常显示，一般都给一个默认的整屏的宽度为980px（css像素），虽然能这样让移动端浏览器兼容大部分...2.2 移动端视口在移动端视口与移动端浏览器屏幕宽度不再相关联，可以比浏览器的可视区域更大或者更小，还可以对页面进行缩放（放大、缩小）。...视觉视口是用户正在看到的网站的区域，对于的javascript属性是window.innerWidth/Height 2.2.2 布局视口（layout viewport）布局视口：在移动端视口与移动端浏览器屏幕宽度不再相关联...布局视口不会受到缩放的影响，缩放不会导致页面重排渲染，对于移动端宝贵的性能来说非常重要。

2.7K12 0

HTML5新增的几个a标签属性移动端

HTML5新增的几个移动端a标签属性移动终端拨号：代码： 13800138000 实例：点击拨号：13800138000 移动终端发信息...web.png" alt="web"/> 实例：点击下载图片　此处a标签的 download可以写成 download="download; 声明：本文由w3h5原创，转载请注明出处：《HTML5...新增的几个a标签属性移动端》 https://www.w3h5.com/post/16.html

1.9K0 0

HTML5移动端开发的常用触摸事件

HTML5移动端开发的常用触摸事件 h5开发手机端是经常会有触摸事件和滑动事件 HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略...因为iOs设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。　　...在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，Android上的浏览器也实现了相同的事件。...touch.pageY-50 + ‘px’; } }, false); 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/151966.html

2.6K1 0

09-移动端开发教程-Sass入门

然后是语句块 @mixin reset { padding: 0; margin: 0; } html, body, div , input { @include reset(); //...} //css style //------------------------------- html, body, div, input { padding: 0; margin: 0; }

2.4K6 0

06-移动端开发教程-fullpage框架

的插件fullpage.js核心文件--> 2.4 编写页面结构编写html...DOCTYPE html> html lang="en"> $(function () { $('#dowebok').fullpage(); }); html...fn.fullpage.moveSectionUp(); }); 配合animate.css实现动态效果案例首先说明animate.css本身就有兼容问题，ie9+浏览器可以无视，另外考虑到手机的性能，移动端尽量不要使用大量动画

7.5K9 0

06-移动端开发教程-fullpage框架

的插件fullpage.js核心文件--> 2.4 编写页面结构编写html...DOCTYPE html> html lang="en"> $(function () { $('#dowebok').fullpage(); }); html...fn.fullpage.moveSectionUp(); }); 配合animate.css实现动态效果案例首先说明animate.css本身就有兼容问题，ie9+浏览器可以无视，另外考虑到手机的性能，移动端尽量不要使用大量动画

7.4K5 0

04-移动端开发教程-在线字体

此在线工具可以选择图标、增加图标、修改图标、移动图标、上传图标等操作，操作完成后选择要下载的图标然后选择右下角的生成字体，然后就可以下载字体了。

4.5K6 0

YonBuilder 应用构建教程之移动端扩展

YonBuilder 移动端扩展在上一篇文章中，我们通过对员工信息实体的移动端页面构建来对 YonBuilder 移动端配置的基础流程进行了简单的介绍，本篇文章则通过之前搭建的出入库实体来进行扩展，主要介绍如何在移动端中添加跳转页面的功能以及通过函数实现自定义配置的方法...一、页面构建创建移动端页面有两种方式：一种是在创建 PC 端页面时勾选同时生成移动端，而另一种则是如下图操作在有需求时选中具体页面添加移动端。...由于此前搭建的出入库应用中不需要使用移动端页面，因此本次通过添加移动端的方式为之前的页面增补对应的移动端。...通过添加移动端的方式，我们拥有了每个单独页面对应的移动端页面，但此时每一个单独的移动端页面内的所有跳转是只包括一个列表以及它对应的详情页信息的。...更多移动端案例可以前往官方教程如果有任何疑问，欢迎在评论区交流探讨哦！

9190 0

09-移动端开发教程-Sass入门

然后是语句块 @mixin reset { padding: 0; margin: 0; } html, body, div , input { @include reset(); //...} //css style //------------------------------- html, body, div, input { padding: 0; margin: 0; }

3K9 0

移动端逆向教程1.3 测试环境搭建

在安卓逆向过程中，我们经常需要动态调试app,而不少app都有模拟器检测，以及各种意外的问题导致无法在模拟器上运行，因此选购一部合适的测试真机是非常有必要的。本...

1.2K2 0

java移动端开发_移动端开发

1.移动端视口问题视口是指浏览器的可视区域，移动端的视口到底是多宽呢？现在市面上的大部分手机，比如iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。...我们可以使用谷歌浏览器的移动端调试工具，来访问百度的搜索结果，可以看到网页明显被缩小了，而且页面宽度定格在980px(不信的话大家可以试试)。...好在HTML给我们提供了一个关键字device-width ，该关键是读取当前移动设备的宽度。因此，我们只需要使用下面的代码，即可让所有移动设备的视口宽度和其自身的宽度相等。...3.移动端尺寸是同一个网页在不同尺寸手机中的效果。...注意：在移动端，如果使用了背景图(比如雪碧图)，记得用同样的方式调整背景图的尺寸。题外话：移动端看上去是不是很麻烦？视口那么小，还要引入各种东西，里面要添加的又杂又乱，还要计算数值，是不是很麻烦？

6.9K2 0

轻松实现移动端与 NAS 端远程访问的详细教程

很多小伙伴在问nas设备要怎么才可以在移动端进行访问，想要在平板、手机等设备访问家里的nas其实不难，只要利用节点小宝配置一个外网访问域名就可以实现，下面给大家详细演示一下操作教程：一、准备工作确保NAS...二、安装和配置远程访问应用安装APP：电脑或者手机下载客户端，移动端可以在手机的应用商店中搜索并安装节点小宝APP。...配置NAS：nas设备端也下载一个节点小宝，记得将nas设备端的节点小宝绑定码输入到电脑或者手机上进行绑定。...以上是一个基本的手机远程访问NAS的教程。根据你的具体需求和NAS的型号，步骤可能会有所不同。

2.9K1 0

html5开发手机端网页(移动端web开发的几种方式)

一、框架开发手机网站一般用现在常用的开发框架有：目前Web前端最火的框架（BootStrap）、Jquery mobile..当然可能还有一些移动端开发的框架，这些我就没具体去研究过。... html> 下面是我做的基于微信二次开发的手机页面案例：点击预览其实在移动端的开发让我纠结的是在字体单位上的选择。...它是相对于html根元素来设置当前文字大小，或者宽高的。因为它是一个不固定值,不像PX。听说在PX这个单位在PC和移动的解析不同，所以才使用rem的。...目前来说，就移动端的淘宝首页就是采用rem来作为单位来布局的。关于使用rem单位这个问题以及它的好处：还得需要大神来解答这个问题，毕竟我也只是刚接触。...对于移动端的JS效果可能和PC端有些不同，因为移动端有移动端的事件，这也是我为什么老是强调学JS，是学原生JS，而不是学Jquery。我的下篇文章就会讲到”为什么学JS要学原生JS”。

9.8K4 0

让一段HTML代码显示在桌面端网页而在移动端隐藏

大桌面显示器，大于等于 1200px） */ @media (min-width: @screen-lg-min) { ... } 参考：利用@media与@media screen进行响应式布局 html...+css如何能实现电脑端隐藏手机端显示版权所有：可定博客 © WNAG.COM.CN 本文标题：《让一段HTML代码显示在桌面端网页而在移动端隐藏》本文链接：https://wnag.com.cn.../1197.html 特别声明：除特别标注，本站文章均为原创，本站文章原则上禁止转载，如确实要转载，请电联：wangyeuuu@qq.com，尊重他人劳动成果，谢过~

2.1K3 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭