为什么某些网页在移动设备上显示在tablet视图中？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

移动端自适应的常见手段

相关问题：图片或 1px 边框显示模糊在移动端中，常见图片或者 1px 的边框在一些机型下显示模糊/变粗的问题。基于对像素相关的概念理解，可知 CSS 中的 1px 是指一个单位的逻辑像素。...一个单位的逻辑像素映射到不同像素密度比的设备下，实际对应的物理像素不同。因此，同样尺寸的图片在高密度比的设备下，由于一个位图像素需要应用到多个物理像素上，所以会比低密度比设备中的视觉效果模糊。...由于移动设备尺寸较小，如果基于浏览器窗口大小的视口进行布局，会导致一些没有适配过移动设备样式的站点布局错乱，用户体验差。...为了让移动端也能正常显示未适配移动设备的页面，从而引入布局视口和视觉视口的概念。布局视口（layout viewport）布局视口的宽度默认为 980px，通常比物理屏幕宽。...CSS 布局会基于布局视口进行计算。移动设备的浏览器基于虚拟的布局视口去渲染网页，并将对应的渲染结果缩小以便适应设备实际宽度，从而可以完整的展示站点内容且不破坏布局结构。

1.9K0 0

【移动端网页布局】移动端网页布局基础概念 ② ( 视口 | 布局视口 | 视觉视口 | 理想视口 )

它是指网页中可见部分的大小，即浏览器窗口中显示的内容大小。在移动设备上，由于屏幕较小，需要对网页进行缩放以适应屏幕大小，因此布局视口也需要进行调整。...移动设备上的布局视口通常比桌面浏览器中的布局视口小，因为移动设备屏幕的大小通常比桌面屏幕小。...为了使网页在不同设备上都能够正确地显示和布局，开发者可以使用响应式设计来根据设备的不同调整布局视口。...为了使网页在不同设备上都能够正确地显示和布局，开发者需要考虑不同设备的视觉视口大小和缩放比例，并使用相应的技术和工具进行适配。...理想视口的大小取决于网页的内容和布局，通常应该与布局视口的大小相同。通过设置理想视口，可以使网页在不同设备上具有相同的布局和显示效果，无需进行缩放和滚动。

1.3K3 0

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

是的

没有找到

从零开始学 Web 之 CSS3（八）CSS3三个案例

PC设备设计的网页也能在移动设备上正常显示，移动设备厂商也的确是这样来处理的。...在移动设备上viewport不再受限于浏览器的窗口，而是允许开发人员自由设置viewport的大小，通常浏览器会设置一个默认大小的 viewport，为了能够正常显示那些专为PC设计的网页，一般这个值的大小会大于屏幕的尺寸...从图中统计我们得知不同的移动厂商分别设置了一个默认的viewport的值，这个值保证大部分网页可以正常在移动设备下浏览。...; document.documentElement.clientHeight; 通过前面介绍我们知道，如果要保证为PC设计的网页在移动设备上布局不发生错乱，移动设备会默认设置一个较大的viewport...是我们布局网页的区域，那么最终layout viewport是要显示在ideal viewport里的，而layout viewport大于ideal viewport时，于是就出现滚动条了，那么为什么有的移动设备网页内容被缩放了呢

1.3K1 0

从零开始学 Web 之移动Web（一）屏幕相关基本知识，调试，视口，屏幕适配

PC设备设计的网页也能在移动设备上正常显示，移动设备厂商也的确是这样来处理的。...在移动设备上viewport不再受限于浏览器的窗口，而是允许开发人员自由设置viewport的大小，通常浏览器会设置一个默认大小的 viewport，为了能够正常显示那些专为PC设计的网页，一般这个值的大小会大于屏幕的尺寸...从图中统计我们得知不同的移动厂商分别设置了一个默认的viewport的值，这个值保证大部分网页可以正常在移动设备下浏览。...; document.documentElement.clientHeight; 通过前面介绍我们知道，如果要保证为PC设计的网页在移动设备上布局不发生错乱，移动设备会默认设置一个较大的viewport...是我们布局网页的区域，那么最终layout viewport是要显示在ideal viewport里的，而layout viewport大于ideal viewport时，于是就出现滚动条了，那么为什么有的移动设备网页内容被缩放了呢

8042 1

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

一个宽度只有375像素的手机，却能够显示宽度为980像素的网页，自然而然，网页会被缩小。...(注：实际上，这里说的375像素不是真实的物理像素，至于这个375像素是怎么来的，以及为什么大部分移动端的默认视口宽度是980，这就是另一个更加复杂的话题了，在此我们先不做讨论。)...好在HTML给我们提供了一个关键字device-width ，该关键是读取当前移动设备的宽度。因此，我们只需要使用下面的代码，即可让所有移动设备的视口宽度和其自身的宽度相等。...1.0(原始大小)，设置这句代码的目的是为了放置某些程序(比如JS)无意中修改了网页的缩小比例 maximum-scale=1.0 ：网页最大的放大比例为1.0(原始大小)，设置这句代码的目的是为了放置某些程序...3.移动端尺寸是同一个网页在不同尺寸手机中的效果。

5K2 0

01_移动端布局基础

单独制作移动端页面优点可以充分考虑到平台的优势和局限性创建良好的用户体验设计网页在移动设备上加载更快单独制作移动端页面缺点移动端网站会产生多个URL（PC端一套URL，移动端一套URL）维护成本会增加...1.3 移动Web开发基础 1.3.1 视口视口（Viewport）最早是由苹果公司在推出 iPhone 手机时发明的，其目的是为了让 iPhone 的小屏幕尽可能完整显示整个网页，它是浏览器显示页面内容的屏幕区域...视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。布局视口布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。...当移动端浏览器展示 PC 端网页内容时，由于移动端设备屏幕比较小，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。...屏幕分辨率是指一个屏幕上可以显示多少信息，通常以像素（px）为单位来衡量。在同一台设备上，图片的像素点和屏幕的像素点通常是一一对应的。

981 0

前端工程师之移动端布局基础

单独制作移动端页面优点可以充分考虑到平台的优势和局限性创建良好的用户体验设计网页在移动设备上加载更快单独制作移动端页面缺点移动端网站会产生多个URL（PC端一套URL，移动端一套URL）维护成本会增加...1.3 移动Web开发基础 1.3.1 视口视口（Viewport）最早是由苹果公司在推出 iPhone 手机时发明的，其目的是为了让 iPhone 的小屏幕尽可能完整显示整个网页，它是浏览器显示页面内容的屏幕区域...视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。布局视口布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。...PC 端网页内容时，由于移动端设备屏幕比较小，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。...屏幕分辨率是指一个屏幕上可以显示多少信息，通常以像素（px）为单位来衡量。在同一台设备上，图片的像素点和屏幕的像素点通常是一一对应的。

751 0

H5移动端开发学习总结

如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了...visual viewport（视觉视口,即用户实际看见的部分）：屏幕上显示的网页区域的尺寸，会被缩放影响，可以通过window.innerWidth来获取。...ideal viewport（完美视口）:完美适配移动设备的viewport，它的宽度等于移动设备的屏幕宽度。有了完美视口，用户不用缩放和拖动网页就能够很好的进行网页浏览。...而完美视口需要通过viewport meta标签来进行相应的设置。 ###像素### 一个像素就是计算机屏幕能显示一种特定颜色的最小区域。屏幕上的像素越多，同一时间你可以看到的就越多。...px是相对长度单位，相对的是设备物理像素(device pixel) 注意：在旧的屏幕上，当缩放程度为100%时，一个CSS像素等于一个设备像素。

1K2 0

多图站点性能优化

1.2 图片压缩和缩放处理由于实际应用场景的差异，对应图片的布局大小以及图片细节要求各有不同，大量未经压缩或缩放调整的图片会使网页加载许多不必要的字节，且对用户的视觉效果没有太大的提升。...具体细节上，需要自行计算图片节点与目标视口的纵向或横向距离，且需使用节流函数来避免性能问题。 3.2 图片预加载图片预加载机制是为了增强用户体验，尽快地加载出图片，使得用户体验更为流畅。...一般可以通过使用 picture 标签来定义零或多个 source 节点和一个 img 节点，用于提供图片在不同设备/显示场景下对应的内容展示。...比如在较小的显示器上，加载一个更突出重点的图像。...jpeg" /> 节省带宽并提升页面加载速度通过按需加载并显示最适合用户设备的图像

1.4K0 0

探讨移动端适配

就相同大小的屏幕而言，当屏幕分辨率低时（例如 640 x 480），在屏幕上显示的像素少，单个像素尺寸比较大。...屏幕分辨率高时（例如 1600 x 1200），在屏幕上显示的像素多，单个像素尺寸比较小。...这是为了让pc端的网页也能在移动端完整展示如果pc端网页超过了980px那么移动端浏览器会对网页进行缩放以正常显示通过结合上面的规律我们得出，视口小于物理像素时，页面展示的元素会放大，视口大于物理像素时元素会缩小...这就是pc端网页没有做移动端适配的情况下，在移动端看上去会非常的小，我们要通过缩放才能正常浏览网页，当然这个体验并不是很好这也就是我们常说的布局视口完美视口（理想视口）默认情况下移动端的像素比为...980/移动端宽度布局视口带来的问题是如果我们直接在网页中编写移动端代码，在980的视口下像素比是非常不友好的也就是 1px =0.几物理像素，这样就会导致网页中的内容非常非常小因此在编写移动端页面时

1.4K1 0

响应式设计

通过使用几个关键技术，根据用户浏览器视口的大小（或者屏幕分辨率）让内容有不一样的渲染结果。这种方式不需要分别维护两个网站。只需要创建一个网站，就可以在智能手机、平板，或者其他任何设备上运行。...# 移动优先开发移动版网页有很多限制：屏幕空间受限、网络更慢。用户跟网页交互的方式也不一样：可以打字，但是用着很别扭，不能将鼠标移动到元素上触发效果等。...除了前面提到的交互菜单，移动版设计主要关注的是内容。在大屏上，可以把页面的大块区域拿来做头部、主图、和菜单。然而在移动设备上，用户通常有更明确的目标。移动版设计就是内容的设计。...# 给视口添加 meta 标签视口的meta标签。这个 HTML 标签告诉移动设备，你已经特意将网页适配了小屏设备。...在移动设备上实现表格的响应式布局 table { width: 100%; } @media (max-width: 30em) { /* 让表格所有的元素都显示为块级 */ table,

2.1K1 0

什么是移动端开发【重点学习系列—干货十足–一万字详解】

屏幕分辨率与显示分辨率不同。计算机可以修改显示分辨率，信号传递给屏幕，屏幕会进行计算，在屏幕上显示。...== 位图像素在一个标准的显示密度下(普通屏)，一个 CSS 像素对应着一个设备像素，高清屏幕下一个 CSS 像素等于 N 个物理像素像素密度屏幕上每英寸可以显示的像素点的数量，单位是 ppi...像素比 / N倍屏像素比（DPR dpr）：单一方向上设备物理像素和设备独立像素的比例。像素比的作用程序可以根据像素比来显示不同的图片，达到清晰显示网页的效果。...移动端移动端的视口与 PC 端不同，有三个视口布局视口视觉视口理想视口布局视口布局视口是用来放置网页内容的区域。...滑动露白页面缩放为什么要阻止这些默认行为这样可以让网页在不同的浏览器都有一样的表现。

2.6K2 1

自适应和响应式的区别

这个概念是为解决移动互联网浏览而诞生的。自适应设计（Adaptive Design） [概念]：自适应设计指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。...（可以想象：响应式设计要考虑的内容要比自适应设计复杂的多） Adaptive design (自适应设计实现原理)：是为不同类别的设备建立不同的网页，检测到设备分辨率大小后调用相应的网页。...响应式优缺点和标志 ---- 标志面包屑菜单改变浏览器宽度会在不同分辨率下显示不同的布局优点：面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点：仅适用布局、信息、框架并不复杂的部门类型网站...自适应网站优缺点和标志 ---- 标志大多只是适配单个终端的主流N个主流视口（2-3个）当视口大小低于设置的最小视口时，界面会出现显示不全，溢出，并出现横向滑动指示器（主要出现在pc端，移动端决不允许出现这种情况...）总体框架不变，横线布局的板块大多会有所减少优点对网站的复杂程度兼容性更大实施起来代价更低，代码更高效测试更容易，运营相对更精准（图片可控性更高）缺点：在移动端设计大行其道之下，同一个网站

9792 0

JS判断当前设备属于哪种客户端并让移动端可调试

另外Vue项目在PC端进行开发时，我们可以通过按住F12键进入开发者模式对代码进行调试；然而iPad和Mobile等移动端设备上运行的项目却无法通过移动设备自带的快捷键而进入调试模式查看打印日志和网络请求...，而是需要我们安装额外的调试插件之后才能在移动设备上对源码进行调试，并查看打印日志和网络请求。...本文主要使用javascript代码判断当前设备属于何种客户端，并通过安装插件的方式让我们在移动端设备上也能查看前端项目打印的日志及网络请求，希望对读者朋友们有帮助。...js方法描述 Mobile device.mobile() 判断是否属于手机移动设备方法 Tablet device.tablet() Desktop device.desktop() 判断是否属于...文件中引入并初始化化Eruda import eruda from 'eruda' //初始化 eruda.init() ``` 同样，项目运行起来的时候也会在设备的屏幕上显示eruda的图标 3

1.2K4 0

Web性能优化：不要与浏览器预加载扫描器对抗

这个延迟使我们更容易在网络瀑布图中看到预加载扫描器的工作情况。图4：在移动设备上通过模拟3G连接在Chrome上运行的网页的 WebPageTest 网络瀑布图。...图5：在移动设备上通过模拟3G连接在Chrome上运行的网页的WebPageTest网络瀑布图。该页面包含一个样式表和一个注入的异步脚本。...图6：在移动设备上通过模拟3G连接在Chrome上运行的网页的WebPageTest网络瀑布图。该页面包含一个样式表和一个异步脚本元素。预加载扫描器在渲染阻塞阶段发现了该脚本，并与CSS同时加载。...图8：在移动设备上通过模拟3G连接在Chrome上运行的网页的WebPageTest网络瀑布图。尽管图像资源在启动时在视口中是可见的，但它被不必要地偷懒加载。...图9：在移动设备上通过模拟3G连接在Chrome上运行的网页的WebPageTest网络瀑布图。

5.4K15 1

【移动端网页布局】移动端网页布局基础概念 ③ ( meta 视口标签简介 | 利用 meta 视口标签设置网页宽度是否允许用户缩放初始缩放比例最小缩放比例最大缩放比例 )

通过设置正确的 meta 标签，可以使网页在不同设备上具有相同的理想视口大小和布局。...---- 1、不设置 meta 视口标签代码示例如果不设置 meta 视口标签 , 在移动端默认的网页宽度为 980 像素 , 所有的标签元素都是在 980 像素宽度的网页中显示 ; 代码示例...: 如果不设置 meta 视口标签 , 在移动端默认的网页宽度为 980 像素 , 所有的标签元素都是在 980 像素宽度的网页中显示 ; body 中的文本会缩小到很小的大小 ;...2、设置 meta 视口标签代码示例设置 meta 视口标签 , 在移动端默认的网页宽度为设备宽度 , 是理想视口 ; body 中的文本显示正常 ; 推荐视口标签写法 : 所有的手机端网页都设置如下样式...: 设置 meta 视口标签 , 在移动端默认的网页宽度为设备宽度 , 是理想视口 ; body 中的文本显示正常 ;

3.9K2 1

【Hello CSS】第三章-浏览器的视图与坐标

由于CSS像素（CSS Pixels）是个逻辑性的像素，而非物理性的像素，所以1个CSS像素在不同设备上大小可能会有不同。但即便是如此，对于CSS来说，还是希望在不同设备上大小尽可能地看起来相同。...在WEB开发中，视口(viewport) 是个很重要的概念，尤其在响应式网页设计中是必备的。...在尺寸较大的设备中，在这些设备上，应用显示区域不一定是全屏的，viewport 是浏览器窗口的大小。在大多数移动设备中，浏览器是全屏的，viewport 是整个屏幕的大小。...初始视口指的是任何用户代理和样式对它进行修改之前的视口。桌面浏览器如果不是全屏模式的话，一般是基于窗口大小。在移动设备上（或者桌面浏览器的全屏模式），初始视口通常就是应用程序可以使用的屏幕部分。...对于我们在移动设备上常用的viewport设置 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale

2.4K2 0

PHP简单判断手机设备的方法

PHP 简单判断手机设备的方法，涉及 php 基于服务器预定义变量进行判断操作的相关技巧，现在移动互联网越来越发到，很多的网站都普及了手机端浏览，为了更好的让网页在手机端显示，我们都选择了使用 CSS...媒体查询制作响应式模版，但这也有弊端，例如某些网站的结构是 CMS 类型的，太多的内容要显示，而使用 CSS 媒体查询设计响应式，只会隐藏但还是加载了，为了让手机端更快速的显示出内容，我们可以使用这个...PHP 判断手机设备代码，使用这个代码可以很方便的显示或不显示自定义的内容。...这是 PHP 判断手机设备函数代码，复制到 PHP 函数库中调用 <?..., "lg-", "lge-", "lge", "mobi", "moto", "nokia", "phone", "samsung", "sony", "symbian", "tablet

1.2K1 0

移动端viewport属性说明笔记

说说移动端浏览器中的视口视口(Viewport)是移动Web开发中一个非常重要的概念，最早是由苹果公司在推出iPhone手机时发明的，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页。...通过设置视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。 # 基础概念像素是计算机屏幕中显示特定颜色的最小区域。...# 布局视口(layout viewport) 指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。...根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。...iOS, Android 基本都将这个视口分辨率设置为 980px，所以 PC 上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。 ?

1.6K2 0

【适配】425- 彻底搞懂移动Web开发中的viewport与跨屏适配

●在浏览器中，我们可以通过滚动条来移动视口以看到更多网页内容。更形象的视口解释： ?...如果浏览器和针对 PC 制作的网页都不做任何处理，那么在窄屏设备上加载网页，我们看到的效果便是默认显示网页的左上角部分，然后通过水平和竖直方向的滚动来浏览网页的其他部分。...3.2 放大的viewport 为了优化“最初为 PC 设计的网页”在移动设备的浏览体验，移动浏览器厂商们想了一个方案，那就是增大页面载入时初始视口的宽度，比如 Android 和 iOS 都比较常见的...不做大的代码调整的话，等比缩放类的移动端网页，在 PC 上的合理展现方式应该是页面总宽度锁定在某个值，然后水平方向居中。（如下图） ?...在滚动到视图中之前，视口外部的内容在屏幕上不可见。 ●当前可见的视口部分称为可视视口。这可以小于布局视口，例如当用户进行缩放缩放时。该布局视口保持不变，但视觉视口变小。

3.1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭