腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

综合排序丨最热优先丨最新优先

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

1.移动端视口问题视口是指浏览器的可视区域，移动端的视口到底是多宽呢？现在市面上的大部分手机，比如iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。 (注：实际上，这里说的375像素不是真实的物理像素，至于这个375像素是怎么来的，以及为什么大部分移动端的默认视口宽度是980，这就是另一个更加复杂的话题了，在此我们先不做讨论。) 我们可以使用谷歌浏览器的移动端调试工具，来访问百度的搜索结果，可以看到网页明显被缩小了，而且页面宽度定格在980px(不信的话大家可以试试)。 3.移动端尺寸是同一个网页在不同尺寸手机中的效果。注意：在移动端，如果使用了背景图(比如雪碧图)，记得用同样的方式调整背景图的尺寸。题外话：移动端看上去是不是很麻烦？视口那么小，还要引入各种东西，里面要添加的又杂又乱，还要计算数值，是不是很麻烦？

全栈程序员站长

2022-09-12

6.9K0

标签:

【移动端网页布局】移动端网页布局基础概念 ① ( 移动端浏览器 | 移动端屏幕分辨率 | 移动端网页调试方法 )

一、移动端浏览器 ---- 移动端浏览器比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 , 常见的浏览器如下 : UC / QQ / Opera / Chrom / 360 / 百度 / 搜狗 / 猎豹国内的浏览器基本都是根据 Webkit 内核进行修改而来的 , 目前没有自主研发的内核 , 因此移动端开发适配比较简单 , 兼容主流的浏览器 , 即兼容 Webkit 内核浏览器即可 ; 二、移动端屏幕分辨率 ---- 移动设备的尺寸类型非常多 , Android / iOS 手机分辨率种类很多 , 参考 Android 屏幕适配专栏 ; 【Android Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI ) 博客 ; 前端开发时 , 不需要关注上述屏幕像素密度 dpi , 密度无关像素 dp , 只需要关注像素尺寸 px 即可 ; 三、移动端网页调试方法

2023-04-24

3.8K0

标签:

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

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

2018-02-18

8.9K0

标签:

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

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

2018-04-08

8.1K0

标签:

移动端基础

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

2020-10-26

2.3K0

标签:

移动端适配

实习期间主要在写微信端H5，遇到的最大问题就是适配各个不同尺寸的屏幕。公司就我自己一个前端，只能自己摸索着来。

超超不会飞

2020-09-18

2.9K0

标签:

移动端基础

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

2022-05-08

2.7K0

标签:

移动端基础

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

2020-09-30

3K0

标签:

vue 判断移动端、pc端

判断移动端或pc端经常在项目中会有支持 pc 与手机端需求。并且pc与手机端是两个不一样的页面。这时就要求判断设置，根据不同的设置跳转不同的路由。先写个方法： ? _isMobile()) { alert("移动端"); //移动端跳转路由 } else { alert("pc端"); 　　　　//Pc端跳转路由

2021-01-04

4.4K0

标签:

【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )

一、移动端页面布局方案移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端与移动端访问的是不同的页面 , 目前的京东 / 淘宝等电商网站移动端页面采取的该方案 ; 响应式页面兼容移动端 : 开发难度较大 , PC 端与移动端访问的是相同的页面 ; 1、单独制作的移动端页面通过设备类型判断要加载的网页类型 , 一般会在域名前添加 m 打开移动端 , 如京东域名为 jd.com , 使用 m.jd.com 可以访问其移动端页面 ; 如京东商场 , 在浏览器中输入 https://www.jd.com/ 域名 , 进入的是 PC 端的网页 , 在浏览器中 , 按 F12 进入调试模式 , 选择手机设备调试 , 输入 https://www.jd.com/ 域名 , 会自动跳转到 https://m.jd.com/ 手机端页面中 , 京东后台会认为是移动设备请求页面 , 自动跳转到移动端页面 ; 2、响应式页面兼容移动端响应式页面兼容移动端的原理是通过判断当前的屏幕宽度 , 改变当前的页面样式 , 适应不同的设备 ; 如果不断地缩小浏览器的窗口的宽度 , 网页会不停地自适应修改布局

2023-04-24

4.6K0

标签: