解决html在手机和PC端显示效果不一致的问题

最新推荐文章于 2024-06-25 06:17:50 发布
最新推荐文章于 2024-06-25 06:17:50 发布
阅读量3.9k 收藏 15
点赞数 4
分类专栏： html 文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liji_digital/article/details/130546598
版权

在开发网站的过程中，我发现自己的html在PC端的浏览器里正常显示，但是在手机上则不行。根据(5条消息) 网页显示不全（运行时网页pc端显示完全，手机端显示不全）_手机网页打开后显示不完整怎么调_白嫖leader的博客-CSDN博客

的描述，在head标签内加入如下内容，则手机端也能正常显示：

<head>
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=0.3, maxmum-scale=1.0, minimum-scale=0.3">
</head>

 

金色熊族
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
HTML5 移动页面自适应手机屏幕四类方法
bacongti2381的博客
03-20 1万+
1、使用meta标签：viewport H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。 手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比...
PC端和移动端自适应问题的快速解决方法
09-24
如何解决PC端和移动端自适应问题？下面小编就为大家带来一篇PC端和移动端自适应问题的快速解决方法。希望对大家有所帮助。一起跟随小编过来看看吧，祝大家游戏愉快哦
怎么解决移动端响应式布局问题
日晞的博客
08-17 430
达到这种布局，且是响应式（即随着移动端的变化，元素大小也相应变化） flex 布局(flex:25%) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt...
html手机和电脑显示内容不同,同一个网站，手机端跟电脑端显示不同是怎么实现的？...
weixin_39593277的博客
06-09 3029
同一个网站，手机端跟电脑端不同是怎么实现的？常见的方式有三种：1，自适应网站同一套代码，自动实现手机端和电脑端的布局自动调整。例如：openGPS.cn网站现在大部分页面已经支持自适应展示，手机端电脑端都可以访问本站内容，正常阅读。自适应站点，往往是对CSS布局的重点考虑，本站使用的是BootStrap这个前端样式组件实现的自适应布局。2，网站二级目录这种是早期网站比较喜欢的做法，因为其实这是一...
知道为什么HTML页面在电脑上和手机上的布局不同吗？这篇文章带你走进Element UI的简单适配
m0_57249797的博客
10-18 1611
引言 之前的文章介绍过bootstrap的响应式布局，帮助我们在手机上适配电脑上的页面， 当然媒体查询也是一个很不错的适配方法 今天带你们了解Element UI的适配方法 Element的栅格系统 bootstrap的栅格系统为12栏，而Element UI划分的更细一点，它拥有24栏 那么怎么划分栏呢，方法非常简单， <el-row></el-row>标签定义一行，也就是24栏在这一行中进行划分， <el-col></el-col>定义换分出来的份数，我们
html区分手机和电脑,移动端和pc端的区别是什么
weixin_39784460的博客
06-24 1774
移动端和pc端的区别是：1、pc考虑的是浏览器的兼容性，移动端考虑的更多的是手机兼容性；2、移动端更多的是触屏时间，而缺少的是hover事件，这种问题在pc端是遇不到的。本文操作环境：windows10系统、thinkpad t490电脑。第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，...
html手机端背景显示不全,手机浏览器打开PC端网站，背景显示不全怎么办？
weixin_30387211的博客
06-22 3031
原标题：手机浏览器打开PC端网站，背景显示不全怎么办？随着移动互联网的发展，大多数企业在制作网站的时候，为了兼容各种设备，会制作出PC端、移动端二种版，根据不同的设备跳转到不同的网站，从而实现用户体验最优化。那么，问题来了，笔者遇到一个问题，有个企业老网站之前通过DIV+CSS布局的。电脑端打开网站布局排版都正常。当用手机打开其电脑版的网站时，只要涉及背景的代码，在手机浏览器上显示不完整，出现混乱...
根据终端判断wap和html网页,JS判断是电脑浏览器还是手机端浏览器，并根据不同的终端跳转到不同的网址...
weixin_35250656的博客
06-15 176
JS判断是电脑浏览器还是手机端浏览器，并根据不同的终端跳转到不同的网址function browserRedirect() {var sUserAgent = navigator.userAgent.toLowerCase();var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";var bIsIphoneOs = sUserAgent.match(/...
解决htmlcanvas手机无法截图或者截图不全的问题
12-16
解决htmlcanvas手机无法截图或者截图不全的问题，解决后在手机或者pc上截图效果非常的好。主要解决img对象转换为base64的问题
兼容IE7PC端和移动端的弹窗提示插件
08-05
"兼容IE7PC端和移动端的弹窗提示插件"解决了这一难题，为开发者提供了一个可以在老旧的IE7以及现代的手机和平板设备上运行的弹窗提示解决方案。这个插件设计的核心在于其跨平台和跨浏览器的兼容性，确保在不同环境下...
wordpress企业手机移动端网站源码
12-06
【WordPress企业手机移动端网站源码】是针对那些希望在移动设备上提供无缝浏览体验的企业和个人设计的解决方案。WordPress，作为全球最受欢迎的网站构建平台，拥有丰富的主题和插件资源，使得创建响应式网站变得轻松...
管理后台HTML模板
05-04
通过响应式设计，可以确保模板在不同设备上（如PC端和手机端）自适应显示，提供良好的用户体验。常见的CSS框架如Bootstrap可以帮助快速实现响应式布局。 3. **JS（JavaScript）**：JavaScript是一种客户端脚本语言...
泛微OA【开发技巧】流程表单HTML扩展开发.docx
11-27
2. **支持PC端及手机端HTML模式流程表单**： 这部分强调了开发过程中需要考虑多平台兼容性，确保表单在桌面和移动端都能正常显示和操作。这通常涉及到响应式设计，使用媒体查询等技术来适配不同屏幕大小。 3. **...
PC端和手机端字体显示不一致的解决办法
03-07 6954
主要解决PC端和手机端字体显示不一致的的问题: 主要是在head标签里面添加几个meta页面 添加的meta标签如下 <meta http-equiv="Content-Type" content="text/html"/> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-sc...
html怎么判断PC端和移动端从而显示不同的图片？
ll123456789_的博客
05-21 1174
/ if判断，是不是移动端；如果是，则定义为移动端图片；如果不是，则定义为PC端的图片；-- ID = [imags],这个要对应上上面赋值的ID；如果有多张图的，更改不同ID即可;// 把变量[adres] 赋值给 [video](这个名字也可以随便取);那么,如果想要pc端显示视频,移动端显示图片 怎么做呢?console.log("移动端");console.log("pc端");检测当前是pc端还是移动端。
让一段HTML代码显示在桌面端网页而在移动端隐藏
Cordinovet的博客
04-16 1413
我的主博客是可定博客(https://wnag.com.cn/) 原文链接：让一段HTML代码显示在桌面端网页而在移动端隐藏 在css布局的后面加上 @media (min-width: 768px){.id_name{display:none;}} 这段代码的意思是当屏幕宽大小大于768px时执行{}内的css样式，即class名为id_name显示。 下面是三种屏幕大小不同时应该适应的med...
HTML打开排版混乱
le_____的博客
04-25 276
在当前页面按住CTRL+F5，页面变成。
手机打开html乱码怎么解决,打开网页出现乱码怎么办 打开网页出现乱码解决方法【详解】...
weixin_39624461的博客
06-09 4971
时代不断发展，科技不断进步，电脑已经成为我们日常生活中不可取代的通讯工具，它可以让我们及时的浏览到世界各地的信息，也可以让我们及时得出里自己的工作文件，极大的方便了人们的生活，但电脑叶总实惠出现各种各样的问题让我们手足无措，对于一些电脑白痴来说出来电脑故障实在是太痛苦了，现在我来教大家几招解决乱码的办法。方法一：很多时候网页乱码并不是大问题，可能只是因为系统的设置有一些小小的偏差，也可能是程序运行...
HTML 教程
最新发布
csbysj2020的博客
06-25 502
和
html pc 手机端 区分 js
08-08
在开发Web应用程序时，HTML是必不可少的组成部分。HTML是一种标记语言，用于定义网页的结构和内容。通过使用HTML元素，我们可以创建页面上的各种元素，如标题、段落、图像、链接等。 在PC端和手机端上显示页面有时需要进行不同的布局和设计。为此，我们可以通过使用CSS媒体查询来检测用户是在PC端还是手机端访问页面，并相应地改变页面的样式和布局。 而在做这种页面响应式布局的时候，经常会用到JavaScript。JavaScript是一种用于添加交互和动态功能的编程语言。通过使用JavaScript，我们可以根据不同的设备屏幕尺寸和性能来优化页面，并实现动态效果和交互性。 举个例子，假设我们要在PC端和手机端上显示一个图片轮播器。在PC端上，我们可能会使用大图和按钮来进行导航，而在手机端上，我们可能会使用滑动手势来切换图片。在这种情况下，我们可以使用JavaScript来检测用户设备，并根据设备类型来加载不同的代码和样式表。 另外，JavaScript还可以用于检测用户浏览器的功能支持情况，以便提供更好的用户体验。举个例子，如果用户的浏览器不支持某个功能，我们可以在JavaScript中进行相关的处理和提示，以免用户在使用过程中遇到问题。 总之，HTML、CSS和JavaScript是Web开发中三大重要组成部分。在PC端和手机端上显示页面时，我们可以使用CSS媒体查询和JavaScript来进行区分和适配，以提供更好的用户体验和页面展示效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值