开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

无法正确设置设备宽度，有东西伸出

问题描述：无法正确设置设备宽度，有东西伸出

回答：这个问题通常发生在前端开发中，涉及到响应式设计和适配不同设备屏幕的宽度。以下是可能导致该问题的一些原因和解决方法：

未设置视口(meta viewport)：在HTML文档的<head>标签中添加以下代码可以设置视口，使网页在移动设备上正确显示：

<meta name="viewport" content="width=device-width, initial-scale=1">

这将使设备宽度与屏幕宽度匹配，并且禁用缩放。

使用固定像素值：在设计和开发过程中，应尽量避免使用固定像素值来设置元素的宽度，因为不同设备的屏幕大小和分辨率各不相同。应该优先使用相对单位（如百分比、em、rem）或CSS媒体查询来确保页面在不同设备上具有良好的适应性。
缺乏响应式设计：在开发过程中应该考虑不同设备的宽度和分辨率，并针对不同的设备尺寸使用媒体查询来应用不同的样式。通过使用CSS媒体查询，可以根据设备的宽度动态地改变元素的布局和样式。
测试不足：在开发过程中应进行多种设备和浏览器的测试，以确保页面在各种情况下都能正确显示。可以使用模拟器、真实设备或跨浏览器测试工具来进行测试。

以上是一些常见的问题和解决方法，如果您有具体的代码或示例，可以提供更多信息以便进行更详细的分析和解决方案的给出。

腾讯云产品相关推荐：

云服务器（CVM）：腾讯云提供的弹性云服务器，可根据业务需求灵活选择配置，适配各种设备宽度需求。了解更多：腾讯云云服务器
轻量应用服务器（Lighthouse）：提供极简操作、秒级弹性伸缩、低成本的云服务器实例，适用于小型网站、开发测试环境等。了解更多：腾讯云轻量应用服务器
云存储（COS）：腾讯云提供的对象存储服务，可用于存储和分发静态资源，如图片、音视频文件等。了解更多：腾讯云云存储
人工智能服务（AI）：腾讯云提供各类人工智能服务，如图像识别、语音识别、自然语言处理等，可用于开发与人工智能相关的应用。了解更多：腾讯云人工智能服务

请注意，以上仅为腾讯云产品的推荐，并不代表其他品牌商的产品不适用或不好用。在实际应用中，可以根据具体需求选择适合自己的产品和解决方案。

相关搜索:asp溢出 asp收信 asp动态 asp网址 asp百科 asp网马 asp压缩 asp学校 asp导航 asp首页

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

移动前端开发之viewport的深入理解

在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewport的概念通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域

05

热文回顾 | 超长型桁架式堆垛机的设计

摘要：本文主要讲述一种用于桁架式钢结构货架间运输货物的堆垛机，此类堆垛机行走方向、伸叉方向与常规堆垛机不同，并且在货架顶部进行巷道更换，类似于行车，但具备堆垛机的水平取放货功能。此类堆垛机的金属结构宽度特别大，载货台特别宽，其运载的货物尺寸远超过一般托盘物料等常规货物，这类货物使用传统行车、或者常规堆垛机已经无法满足取货要求。因此设计桁架式堆垛机主要用于船厂、钢管厂等货物超宽且横向放置的仓储系统中。本文采用有限元分析与项目试制验证的方式，考虑了桁架式堆垛机挠度过大、驱动轮偏差不同步等因素，设计了一种刚度较好、制作工艺简单的结构，达到了客户的使用要求，设备运行稳定可靠。

04

信道规划最佳实践，打造更好的Wi-Fi

正确设计和部署无线网络涉及许多任务，其中最重要的一项就是制定信道计划。完善的信道方案将有助于压缩每一个宝贵的连接时间，这是高性能WLAN的基础之一。

03

cityEngine学习笔记（四）

通过这个函数，可以将某些不规则的/地标性建筑通过手动交互式建模的方式建好，然后通过i函数导入即可。毕竟规则化建模适用于相对规则的建筑物，对于一些造型比较别致的，交互的方式可能会更好一些。

02

带着问题去看源码——TextView篇

首先我们先大致的想一下这个问题问的是关于哪一块的知识，如果毫不犹豫上去就是一通回答，这样显得太不明智了，我也知道会重新测量，为什么？下面我们从源码的角度去看。既然是设置文本，那么我们就从TextView的setText中去看看吧：

03

超越媒体查询：使用更新的特性进行响应式设计

除了使用媒体查询和现代CSS布局（例如flexbox和grid）来创建响应式网站之外，我们使用一些比较不太被用或者比较新的特性来制作响应式网站。在本文中，我们将探讨许多可用的工具（围绕HTML和CSS），从响应图像到相对较新的CSS函数，无论我们是否使用媒体查询，它们都可以正常工作。

01

铣刀长些好还是短些好？

数控编程、车铣复合、普车加工、Mastercam、行业前沿、机械视频，生产工艺、加工中心、模具、数控等前沿资讯在这里等你哦

03

Android + Appium 自动化测试完整的环境配置及代码详解

参考大神博客：https://www.cnblogs.com/fnng/p/4540731.html

02

前端-彻底学会CSS布局-这是最全的

其实，我们可能经常在聊组件化，咋地咋地。但是，回过头来思考一下，如果你看到一张设计稿的时候，连布局都不清不楚，谈何组件化呢。所以，我们需要在分清楚组件之前，先来分清楚布局。废话说了这么多，只是想告诉你，布局这个东西真的很重要。本篇内容概括了布局的基础+基本的PC端布局+移动端适配等内容。如果你喜欢我的文章，欢迎评论，欢迎Star~。欢迎关注我的github博客

02

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

布局视口 - Layout ViewPort 指的是在浏览器中，用于显示文档的区域大小和位置。它是指网页中可见部分的大小，即浏览器窗口中显示的内容大小。

03

零碎之viewport

在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。

04

WordPress 主题教程 #11：宽度和布局

宽度和布局是从零开始创建 WordPress 主题系列教程的第十一篇，这篇将介绍如何设置每个 DIV 的宽度和布局排版，并且也会展示如何让主题显示正确，并同时在 Firefox 和 IE 下兼容，显示一致。

02

我对 Twitter 前 10 行源代码的理解

过去几周，我一直在为我的家具租赁公司 Pabio 招聘一名高级全栈 JavaScript 工程师。由于是一个远程团队，面试是在 Zoom 上进行的。根据我的观察，部分开发人员不擅长现场编码或白板面试，即使他们对这项工作很在行。所以取而代之，我们会进行一小时的技术讨论，我会问他们关于 Web Vitals、可访问性、浏览器战争以及其他类似 Web 话题的问题。我很喜欢问的一个问题是：“解释一下 Twitter 源代码的前十几行”。

02

CSS基础布局

CSS布局确定页面的大致结构，页面分多少块，每块的位置。每个部分怎么把该部分撑起来。 * 早期以table为主(简单) * 之后以技巧性的布局为主(难) * 现在有flexbox/grid(偏简单) * 响应式布局在移动端大行其道的时代是必备的 * table表格布局 * float浮动 + margin * inline-block布局 (用起来方便，但是小问题较多) * flexbox布局盒模型如下图所示：宽度和高度指的是content的宽度和高度 margin指的是距离上一个元素

02

SceneKit 场景编辑器-为您的AR体验构建3D舞台

为了能够在应用程序中添加3D模型，我们需要一个3D渲染器框架。在本节中，我们将了解SceneKit的场景编辑器。这是一个很好的空间，可以帮助您可视化3D模型，编辑它，播放动画，模拟物理等。

02

【译】刚出炉的 Grid 布局备忘录，拿走！

come on 📷 伸出小手戳戳上方关注我…… 后台回复红宝书获取JavaScript高级程序设计第4版 📷 Cover image for CSS Grid Cheat Sheet Illustrated in 2021🎖️注：该文翻译及润色工作，已得到原作者授权！ 📷 通过本文和大家一起重新认识 CSS Grid 布局。以下内容是2021年，你使用 Grid 布局可以做的所有事情的备忘单！ Grid 结构 📷 Grid Architecture 父类属性 01 grid-template-

02

理解 CSS 布局和 BFC

CSS布局中有一些概念，一旦你理解了它们，就能真正提高你的 CSS 布局能力。本文是关于块格式化上下文(BFC)的。你可能从未听说过这个术语，但是如果你曾经用CSS做过布局，你可能知道它是什么，理解什么是 BFC，怎么工作以及如何创建 BFC 非常有用，这些可以帮助你理解CSS中的布局是如何工作的。

00

小程序.我也不知道起什么名字

但图片显示的高宽并不是图片本身的高宽。它被MINA框架设置成了宽度300px、高度225px，这也是小程序默认的图片高宽。如果我们不显示地指定图片高宽，所有图片都将保持这个默认值。

03

如何决定响应式网站的 CSS 单位？

我们可以将这个单位用于边距和填充，因为它可以让我们根据元素的字体大小在框周围使用灵活的间距。元素 font-size 会根据设备大小而变化，因此元素周围的间距也将分别发生变化。

01

android 之 ListView 里面嵌套 GridView 遇到的问题及其解决方法。

本文介绍了在Android开发中，ListView和GridView的item点击事件被阻断的问题及解决方法。主要包括了为什么会出现此问题、如何判断被阻断、如何取消阻断、如何设置自定义的item点击事件和动态设置GridView的宽度的方法。通过设置GridView的LayoutParams，可以解决列表项点击事件被阻断的问题。同时，通过设置自定义的item点击事件，可以确保GridView的item点击事件正常响应。

05

移动端H5的一些基本知识点总结

来到这家公司之后,和以前的工作发生了很大的转变.以前我一直是做PC端页面的.来到现在这家公司之后,主要是做手机移动端的页面.

01

理解 Css 布局和 BFC

CSS布局中有一些概念，一旦你理解了它们，就能真正提高你的 CSS 布局能力。本文是关于块格式化上下文(BFC)的。你可能从未听说过这个术语，但是如果你曾经用CSS做过布局，你可能知道它是什么，理解什么是 BFC，怎么工作以及如何创建 BFC 非常有用，这些可以帮助你理解CSS中的布局是如何工作的。

00

viewport深入理解和使用

viewport是用户网页的可视区域，也可叫做视区。手机浏览器是把页面放在一个虚拟的窗口(viewport)中，通常这个虚拟的窗口比屏幕宽，这样就不用把网页挤到很小的窗口中，用户可以通过平移和缩放来看网页的不同部分。

01

viewport深入理解和使用

viewport是用户网页的可视区域，也可叫做视区。手机浏览器是把页面放在一个虚拟的窗口(viewport)中，通常这个虚拟的窗口比屏幕宽，这样就不用把网页挤到很小的窗口中，用户可以通过平移和缩放来看网页的不同部分。

03

一个emoji引发的思考

之前在做一个留言功能时，发现在其中一台安卓5.0的手机上，输入emoji糊掉了，成了如下这样的情况

02

小结CSS的float属性

应用了float属性的元素，就像在印刷布局中，形成文字环绕图片的效果。除此之外，浮动还可以用于创建网页布局

05

小结CSS的float属性

应用了float属性的元素，就像在印刷布局中，形成文字环绕图片的效果。除此之外，浮动还可以用于创建网页布局

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

例如：<meta name="viewport" content="width=device-width, initial-scale=1.0"> , 该标签的作用是告诉浏览器，

02

我对移动端适配的了解

[总结]我对移动端适配的了解不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂商们为其开放了应用入口和系统推广引流入口。这些新能力为前端开发者们带来更强的作战能力。我们在开发PC站时经常在浏览器兼容问题上耗费巨大的时间，到了移动端，面对webkit内核的Safari与Chrome会舒心很多。b

03

苹果公司在2018年全球开发者大会上发布了14项重大消息

苹果公司的年度开发者大会，WWDC，于今天下午在圣何塞拉开序幕，它每年都会发布一系列的更新，包括所有主要的操作系统。我们整理总结列出了下面14项重大的消息，在接下来的几天内，我们将有更多的信息要发布。

02

应对冰桶算法的折腾再次领教了Adsense的强大！

百度最近的算法调整非常的频繁，特别是针对移动端的冰桶算法4.0的强势登场感觉影响更大，因为冰桶算法4.0主要是针对移动端广告位置、尺寸的，基本上可以理解为是打击移动端广告泛滥的，所有尺寸过大的以及对内容有遮挡的都会被降权，具体的大家可以看看图1、图2两张百度官方认为是标准正确的移动端广告范例来对比了解一下就明白了。

04

【CSS】禅意花园--心得分享

当我们走入一间房间时，立刻就会注意到其中最明显的陈设：墙壁、窗子、家具等。但，这些东西的质地又是怎样的呢？木板上是否有裂纹？油漆是否已经斑驳？墙面的石灰是否有些脱落？玻璃窗是否有损坏或好久没有擦拭过？类似地，你是否注意到光影效果呢？房间的整体感觉又是如何呢？沉重？轻柔？开阔？还是狭小？所有这些问题的答案都不是那么显而易见，都需要我们的仔细观察才能够回答。但若你想让作品有足够的真实感，那么这些细节却都是必不可少的。——What Lies Beneath

03

IT课程 CSS基础 033_响应式布局

响应式布局是一种能够适应不同屏幕尺寸和设备的网页设计方法。通过使用响应式布局，可以使网页在不同的设备上保持良好的显示效果，无论是在桌面电脑、平板电脑还是手机上。

01

夹头的选择

圆柱直柄均匀夹紧，用于确保铣削、钻削和铰削的最佳跳动精度。不带平面或锁紧功能时，对扭矩和轴向力是有限制的，超出这个限制会造成刀具在夹头中移位。

01

如何修炼成伟大的程序员？

只做正确的事　　对于软件这一行的人，我们有个很大的挑战，就是如何能够用正确方法的做事情。什么是正确的方法，这依赖于你在做什么和做给谁。而究竟所谓 “正确的方法”里都包括了什么内容，这并不是重点，重点是你是否能坚持按照这种方式做事。初级程序员在这个问题是通常不能做到坚持，而资历较深的程序员却能始终坚持原则。也许会有一个“非常紧急”的项目，或者这个项目很特殊，不能按常规过程开发。这只是个假象。好的程序员知道即使在任何情况和环境下都要坚持做正确的事情。如果说按正确的方式开发将导致不能按时完成任务，那么，他们就会知道，这个项目是不能按时完工的。不要妥协，工程质量是你作为一个优秀程序员的唯一终极证明。确保你所有的代码都是在正确的方法下100%正确的写出的。要按一个优秀的程序员的标准来要求自己。

02

HTML页面关于高分屏的设置

所谓高分屏，就是在同样大小的屏幕面积上显示更多的像素点，这样可以呈现更好的可视效果的屏幕。例如，我的笔记本是15.6寸，理论上它的屏幕分辨率应该是1920 x 1080像素，但实际上我的笔记本屏幕分辨率确实2560 x 1440像素，也就是俗称的2K屏。这样的高分屏虽然实现了更加细腻的图像和更加清晰的文本，但也对软件适配带来了问题。

01

【专业技术】使用html5的十大原因

你难道还没有考虑使用HTML5？当然我猜想你可能有自己的原因；它现在还没有被广泛的支持，在IE中不好使，或者你就是喜欢写比较严格的XHTML代码。HTML5是web开发世界的一次重大的改变，事实上不管你是否喜欢，它都是代表着未来趋势。其实HTML5并不难理解和使用。我们这里能列出许多原因为什么现在要开始使用HTML5。　　目前有很多的文章介绍使用HTML5并且介绍了使用它的优势和好处，没错，我们这篇文章也类似。随着更多这样的文章，以及Apple的支持， Adobe围绕HTML5的产品开发，以及移

python数据库入门编程。

下载phpMyAdmin-3.4.0-all-languages.tar.bz2安装包

03

除了看得见，还要摸得着！触觉反馈手套大盘点

戴上头显设备，在光怪陆离的虚拟世界里，除了大饱眼福之外，是否想过伸出手去感受一番呢？下面小编就带你见识下目前能够让你触摸虚拟现实的手部交互装置。 TheRealm System The Realm

07

第11章手机响应式开发（下）

HTML5＋CSS3＋JavaScript Web 前端开发案例教程（慕课版）【不推荐】，微信读书中找到的学习Web前端书籍，第11章开始啦，完结了！耶(＾－＾)V

02

网页页面下各种标签的含义

编码格式告诉给浏览器用什么方式来都这页代码，，这里是用UTF-8编码的，utf-8是国际编码，实用性比较强推荐使用。

01

实战｜抢购脚本编写

故事背景： “jack，听说你大学的专业是计算机科学与技术？” “是的，领导。” “那好，去帮我抢个荣耀v9。” “领导，请你尊重这门专业，计算机科学是……” “请你谈谈NAS设备卷管理模块中失效数据恢复问题的应用。” “领导，脚本写好了” 1.效果图运行的效果图，就是模拟不断点击换一换的效果 2.图解怎么做的呢？让我们一步步分解 1、右击打开 2、元素查看已经获取该元素模拟点击定时器每100毫秒点击一次 1.大于某个时间点 2.模拟点击 3.JS组成 1. 核心（基于E

01

网页页面下各种标签的含义

编码格式告诉给浏览器用什么方式来都这页代码，，这里是用UTF-8编码的，utf-8是国际编码，实用性比较强推荐使用。

01

CSS3 calc()详细介绍及使用

calc()对很多同学来说，或许很陌生。看其外表像个函数，既然是函数为什么又出现在CSS中呢？这一点也让我百思不得其解。

01

仿生模特诞生记

医疗设备的个性化一直是制造商追求的目标。从镀金助听器、霓虹灯拐杖和闪闪发光的机器人假肢到3D打印石膏手臂，残疾人不再等待医疗服务的追赶，他们正自己推动他们的医疗设备向前发展。这些医疗辅助设备正迎来

04

移动端开发之Web App开发

写在前面：本人刚刚接触移动端开发，希望自己的见解能够帮助到他人，不足之处还望提醒。

03

响应式网页设计指南

如何理解响应式设计（RWD）响应式网页设计的概念最初是由 Ethan Marcotte 提出，从设计的角度引领我们思考：为什么一定要为每个用户分别做一套设计方案呢？是否可以有一种设计能够根据不同设备

08

Arduino1.8.13+ESP32初体验

设备就是个surface pro3 ,也没有安装arduino所以就连安装的过程也写一下

02

响应式网页设计指南

1、如何理解响应式设计（RWD）响应式网页设计的概念最初是由Ethan Marcotte提出，从设计的角度引领我们思考：为什么一定要为每个用户分别做一套设计方案呢？是否可以有一种设计能够根据不同设

09

两个 viewports 的故事-第二部分

原文：A tale of two viewports — part two 译者：nzbin 在这个迷你系列中，我将解释 viewports 和各种重要元素的宽度是如何工作的，比如说 <html> 元素，窗口以及屏幕。我们将在本页讨论移动浏览器。如果你是刚刚接触移动端，我建议你首先阅读关于桌面浏览器的第一部分。这会让你在熟悉的环境中循序渐进。移动浏览器的问题手机浏览器与桌面浏览器的最大不同就是屏幕尺寸。对于一个基于桌面优化的网站，移动浏览器的显示效果明显不如桌面浏览器，要么缩小后

07

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭