为什么我的网页在电脑上显示完全正常,在手机上就乱了,尤其是右边空出一段距离的空白 2C

图片说明

0
weixin_44423850
weixin_44423850 你好!还记得这个问题是怎么解决的吗?
29 天之前 回复

6个回答

网页页面设置的问题吧,宽度和高度这些最好不要设置成自动或者固定长度,最好用百分比进行控制,这样的话网页可以随着环境成百分比分布。

0

首先不同中端的屏幕分辨率不同,网页的可视渲染范围也不同,在电脑上面网页显示正常说明该网页适应网页显示比例,如果你想在多个终端上面,手机,平板,电脑,都做适配
,你可以看看bootstrap 框架,或者了解网页自适应屏幕原理,使用一些自适应网页框架来编写你的网页

0

用media query调整不同分辨率下的样式显示,不要定宽。通过@media screen控制网站在移动端显示

0

网页style设置死的吧,没有根据当前的屏幕进行动态设置

0

css样式的问题, 你的自适应设计(响应式设计)没有覆盖该分辨率, 这种情况下可以选择:
0. 浏览器安装Agent工具/插件,可以模拟各种型号、分辨率手机平板,直接浏览器debug
1. 使用成熟的前端框架, 如BootStrap或Foundation
2. 自定义media query,设置对应该分辨率的css样式, 常用的手机分辨率可以百度下
3. Layout设置最好是用百分比不要用绝对值(px)
4. Android Chrome开发可以选择手机、PC Chrome联调,这样你可以在pc上debug手机上的页面

0

明显是样式写死了,试试用百分比吧

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Html页面在手机端出现右边空白
目前我遇到的原因只有一个: body里有一个div把页面撑宽了,就是儿子的宽度比父亲,或者祖辈大就会出现这种 情况为此做了个简单测试:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { p
html页面pc端显示正常,手机端页面整体偏左(兼容性处理)
方法:首先设置body最小宽度body{min-width:1200px}方法:若还行不行,设置meta头部<meta name="viewport" content="width=1200, initial-scale=0.66"/>
vue写手机页面放在手机上显示不正常
尝试在最外层的index.html中添加:&amp;lt;meta name=&quot;viewport&quot;  content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no&quot;&amp;gt;这样,在手机上就不会因为缩放导致页面显示不正常了。亲测有用...
html代码在网页端显示正常,在手机端调用,造成字体、图片有误差解决方式
htmlStr = [NSString stringWithFormat:@"                                              "                             ""                             ""                             "body {font-size:15
关于未使用自适应写的PC页面在手机上显示不全的问题
在head中添加: &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=yes, initial-scale=0.3, maximum-scale=1.0, minimum-scale=0.3&quot;&amp;gt; width=device-width :表示宽度是设备屏幕的宽度 initial-scale=0.3:表示初始...
手机打开显示电脑网站,不出现变形!
&amp;lt;meta name=&quot;viewport&quot; content=&quot;width=1423, initial-scale=0.1&quot;&amp;gt;width:电脑最大宽度initial-scale:为0.1可缩放显示全屏,不出现滚动条initial-scale:为1,可缩放显示部分,出现滚动条...
web网页在手机上浏览排版出错的问题
web网页在手机上浏览排版出错的问题:解决思路:添加水平滚动条,手机上可以查看整个网页的内容。 实现方法:在jsp网页所引用的css表里修改如下语句。代码块在CSS样式表单里面找到相应的样式表的设置HTML { OVERFLOW-Y: auto; OVERFLOW-X: auto }html{overflow-x : hidden ; height : 100% ; margin : 0 ; pa
关于手机打开pdf文档乱码的解决办法
pdf文档在pc上可以正常打开,但是在手机上打开就是乱码了。 手机打开pdf的软件是 开卷有益。 pc上打开pdf的软件是福昕pdf阅读器。 首先,在pc上安装虚拟打印机(SmartPrinter V4.1)。 然后,用福昕打开pdf文档,点击打印,选择打印机名称为:SmartPrinter,点击确认另存。 另存的pdf文档就可以在手机上打开了。
网页在pc浏览器显示正常,移动端浏览器显示不全
不是自适应的网页在手机端或者ipad端的浏览器上展示的时候只显示了一部分,加一段html代码可以暂时解决。 http://203.195.247.129/blog/user/showarticle.html?title=%E7%BD%91%E9%A1%B5%E5%9C%A8pc%E6%B5%8F%E8%A7%88%E5%99%A8%E6%98%BE%E7%A4%BA%E6%AD%A3%E5%B8...
关于缩小页面,谷歌右侧出现空白区域的问题
&amp;lt;body style=&quot;width: 100%;&quot;&amp;gt;    &amp;lt;header style=&quot;width: 100%;&quot;&amp;gt;        &amp;lt;div style=&quot;width: 1200px;&quot;&amp;gt;&amp;lt;/div&amp;gt;    &amp;lt;/header&amp;gt;&amp;lt;/body&amp;gt;当你页面是类似这种布局,缩小HTML页
请问在模拟机上正常运行,在手机 上测试联网就闪退(已解决)
请问在模拟机上正常运行,在手机 上测试联网就闪退 https://blog.csdn.net/feidie436/article/details/77532194 根据这个文章介绍的连接SQL,在模拟机上可以运行,在一个平板上可以运行,但是用手机可以打开,点按钮联网就闪退了,两个手机,一个oppo,一个华为都是一样的。 ...
如何在电脑上调试手机上显示的网页
今日,接到一个任务,后台多个页面的搜索框在手机上显示不出来,让解决此问题。从网上搜索的情况看,大致有两种方法。 第一种:手机用usb连接电脑,然后开启调试模式来做。 这个我电脑用着有问题,前置usb接口有问题,一旦连接手机就会自动重启。后置usb虽然没问题,但连接线不够长,不太方便 第二种:安装手机模拟器。这个一个是模拟机安装文件比较大,另一个启动速度特别慢,也不太合适。 其他就没
解决网页在手机端显示界面很小的问题
在使用Vue+mintUI写项目的时候发现在电脑上调试很好,但是到手机上就发现界面变得好小好小,于是Google了一些解决了该问题。 参考html网页兼容手机浏览器(解决显示页面很小的问题),添加一下代码到mata声明中即可。 <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0
手机端JS页面方法失效,但是PC端却没问题的原因!
PC端和手机端对代码的检查规范不一样。有时候PC端会忽略一些无关重要的报错,但是在手机端就会报错。如果出现电脑端可以,但是手机端死活不行的问题,请先仔细检查你的代码是不是有那些书写问题。
做网站发现手机访问右面有白边的情况:
问题出现在:同时使用了100%和固定宽度。 解决方法: 方案一: html 手机默认的100%宽度是980px。 方案二: &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=网页真实宽度, initial-scale=倍数值&quot;/&amp;gt;...
项目发布到各个电脑上,css样式都变了,jsp页面布局乱了,怎么处理
2018/11/14年第二次修改这个博客: 要想项目自适应所有的浏览器和各种分辨率的电脑,强力推荐一个功能强大的前端框架BootStrap 因为如果是设置百分比不是像素的话,虽然是对的,但是人工的百分比设置,很费时间,费力; 因为许多东西在一个电脑上、三四个电脑上看着没问题,但是到了实践情况,又会发生页面布局乱了的情况,所以强力推荐前端框架bootstrap 1.在做项目开始的时候,布...
手机浏览器不能显示轮播图
自己写了一个轮播图,在电脑版的浏览器可以显示,但在手机上的UC等浏览器不能显示。后经同事提醒,可能是手机浏览器的广告过滤功能把轮播图过滤掉了。但自己写的轮播图为什么会被当成轮播呢?经查看,结果发现代码里带有“AD”等字符串,可能是浏览器把“AD”字符串过滤掉,所以不能显示出来。我把所有有关“AD”的代码删除了,结果在手机浏览器显示了。
前端网页在手机上显示的适配问题
前端开发的h5界面不经适配在手机端显示会出现布局变化的问题。需要在编写的时候注意如下几点,以适应适配。 在head标签内添加 用于设置缩放比例,可以保证整体布局不发生错乱。 对于页面内显示的文字,可以使用两种方式: var deviceWidth = document.documMozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和
h5微信页面在手机微信端和微信web开发者工具中都能正常显示,但是在pc端微信浏览器上打不开(显示空白)
        记录一个最近在微信端页面开发时出现的问题:页面在手机微信端和微信web开发者工具中都能正常显示,但是在pc端微信浏览器上打不开(显示空白)。         原因:pc端微信浏览器不支持es6,而我的代码使用了 let 。         解决:将 let 改为 var。(若使用 es6 语法比较多,可以进行转换,将 es6 语法转为 es5)...
为什么微信小程序里的图片在电脑上显示在手机上不显示?
&amp;lt;image class='carousel' src=&quot;/images/图片301@2x.png&quot;&amp;gt;&amp;lt;/image&amp;gt; 电脑上显示图片,但手机上是空白的   &amp;lt;image class='carousel' src=&quot;/images/301@2x.png&quot;&amp;gt;&amp;lt;/image&amp;gt; 电脑上显示图片,手机上也显示图片   由此可见,微信小程序中,图片...
在手机上查看电脑端开发的网页,(可使用IIS或tomcat,特别注意防火墙、IP地址、局域网的相关知识或使用方法)
这里的使用的两种方法,经过我的亲身经历,发现必须在防火墙关闭下才可以 一、第一种 是使用 llS手机访问电脑服务器上的网页,在电脑上访问的是(localhost:8848/Try/Delete.html) 1、开启电脑热点 2、查看Wifi 密码 3、手机连上这个热点 4、Windows + R 调出 DOS ,输入 ipconfig 来获取IPv4地址 5、用手机访问...
使PC端网页宽度自适应手机屏幕大小
有时候我们会纠结PC页面在手机页面上无法正常显示,超出屏幕,有些内容看不到,现在又了下面的代码,可以做到自适应手机屏幕宽度: 在网页的中增加一个meta标签: 可以让网页的宽度自动适应手机屏幕的宽度。 其中: width=device-width :表示宽度是设备屏幕的宽度 initial-scale=1.0:表示初始的缩放比例 minimum-scale=
网页在手机上打开后禁止缩放的办法
经测试直接在在body之上加一行代码即可: 参考来源: http://www.jb51.net/html5/172213.html http://www.discuz.net/thread-3539641-1-1.html
如何将你书写的网页放在手机上展示
首先说声抱歉,之前填写的网页图片全部都插入错误了,导致之前很多读者没法查看到具体图片,在这里作者表示十分抱歉,因为我在编写的时候,查看图片一般都是正常的,假如发生了某些未知错误,可以点击我的简书处查看。 1.前言我们都知道,我们平时在 PC 端编写的代码一般来说都直接在 PC 上查看一下展示的效果就可以。但是我们的界面在移动端设备上时,我们的用户往往会对界面的内容进行缩放等操作,这时候我们往往需要使
微信小程序在编辑器上样式正常,但在手机上不显示样式
之前做了个小工具,最近有时间,就加了页面,在编辑器上的wxss样式是正常的,但在手机上预览就无法显示颜色,所以没了颜色看起来是样式不生效的 我目前只发现了一个解决方法,但产生问题的真正原因没去仔细研究,所以以后遇到其他的再写上来 解决方法: 颜色无法生效大部分原因是因为用了8位的argb,而不是6位的rgb,你可以用rgba(255,0,0,1)这种 待续…… ...
如何在手机上访问自己做的网页
前提:手机和电脑连接的是同一个路由器的网络。 1.搭建服务器,用Apache 2.把HTML文件放到服务器里面,打开浏览器能访问到服务器(localhost)里的HTML。 3. 查看本机的IP地址进入“网络和共享中心”(在控制面板可以进入,右单击左下角那个网络图标也可以进入),然后再点击已链接的网络,进入了“网络连接状态”窗口,点击“详细信息”在详细列表里我们就可以看到网络的
在电脑上写好的移动端页面,如何在手机上快速查看
我在这里告诉大家一个小窍门,是我的神技,那就是在电脑上写好移动端页面, 如何在手机上快速查看呢?多余的话不说,直接说技能点。 1,这里首先找到自己的ip地址然后把自己的ip地址复制到这里,就是自己 在电脑上打开移动端的路径: 2这里只需要更换localhost就可以了。然后把这一整行都进行复制 3.打开百度,输入二维码生成器。然后把刚才复制的粘贴到二维码生成器的框框里 4,然后
使用mint-ui后,某些手机打开页面空白
近期做的项目中,用的是mint-ui里面的组件,在模拟器上一切都很好,但是后期测试测的时候发现ios8和小米某些系列打开后页面是空白的,首先考虑的肯定是兼容性问题,因为其他手机上显示的是正常的。没有用flex布局,没有使用jquery,最后锁定第三方组件原因。把引用的mint-ui的swipe部分注释后,果然手机都可以正常显示了。出现这一问题怎么解决呢? 第一种方法:把node_modules文...
[mui] 上下拉刷新在浏览器上面能实现,打包后在手机上面无效
话不多说直接上解决方法: 在加载mui.js之前先加上: &amp;lt;script&amp;gt;var h5pullDown = true;&amp;lt;/script&amp;gt; 然后打开mui.js源文件 用 ctrl+f 查找到 pulldownRefresh 添加&amp;amp;&amp;amp; !window.h5pullDown 用 ctrl+f 查找到 pullRefresh 5+ 添加|| window.h...
html页面右侧有空白
在自己写的html页面时,发现右侧总是有一点空白区,想尽了办法,才发现是用一个div把页面撑大了。 也没什么办法,就是打开调试,一个个内容的去审查,看看到底是哪个地方把页面撑大的。
关于pc页面在手机屏幕显示不全
&amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no, initial-scale=0.3, maximum-scale=0.3, minimum-scale=0.3&quot;&amp;gt; &amp;lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&amp;gt;把1
移动端web--PC端网页在手机上查看
将自己的网页相关文件夹替换到demo中:D:\MobileWeb\http\demo修改 "D:\MobileWeb\http\HttpServer.js"的IP地址为自己的IP地址(IP地址通过cmd命令行输入ipconfig获取,ipv4的就是)修改 "D:\MobileWeb\http\HttpServer.js"的首页为index.html安装全局node,安装成功的话,cmd->node
写了一个HTML页面,想用手机打开怎么办?
写了个HTML页面,想用手机访问怎么办?有三种方式 一:xampp服务器(需要电脑一台,手机,xampp服务器)     具体实施步骤: 1.到官方下载xampp安装到电脑上 2.打开xampp,将写好的H5页面放到XAMPP文件夹中的htdocs文件夹中。 3.查看本机的局域网IP地址,如:192.168.1.100,然后手机连接到与PC同一个路由器中(就是将手机的Wlan连接地址换为
ajax在PC上运行正常,打包到手机后就报error0错误
这是原代码,打包到手机后报error 0 错误,F12调试,发现错误是ajax没有创建,错误就是POST var user_code = this.comp(“nameInput”); var user_pass = this.comp(“passwordInput”); var code = user_code.val(); var data1 = { sql:”s
手机浏览器和pc浏览器的width:100%的自适应问题
最近在做一个页面时,发现在 iPad 的 Safari 浏览器中背景显示不全,定位到该 div 后发现所指定 css 的宽度为 100% ; 到百度搜索后发现,safari 中 viewport 默认宽度为 980px,若事先未指定其初始 viewport 宽度,则会默认按照 980px 处理。 可以默认初始化 viewport 宽度或在 css 中设定 min-width,但最简单的方法可以
手机端中有的图片可以显示有的不显示的问题
在pc端的嵌入的html文档在线浏览时可以显示全部的图片,但是在移动端时有的图片可以显示,有的图片显示 不了,查看源代码发现有的img标签有data-original属性和src属性,有的只有data-original属性没有src属性, 只需在嵌入的html文件加上src就可以正常显示。 嵌入的html文件 if(navigator.appName ==
解决Bootstrap在手机屏幕上左右滑动时出现留白的问题
$(function(){    $(".container-fluid").width($(".container-fluid").width()-30);});//如果顶级容器不是 .container-fluid 而是其他 请替换为相应的顶级容器类
解决手机访问网站时整体相对屏幕缩小问题?(已解决)
解决手机访问网站时整体相对屏幕缩小问题?(已解决) 自己开发出来的网站,在手机上访问时,总是整体小了一块,不能很好的适应屏幕,每次都要用手指再放大到合适尺寸,后发现,需要在开发代码中添加:  (可添加到第一行) 参数说明: width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例
word空格后出现一大块空白的问题解决:
word 空格 大块空白
小程序模拟器没问题,但在真机上样式错乱,这个要怎么解决?
在开发工具上面有个远程调试,用对应有问题的手机扫码,调试代码可以发现问题!昨天就是通过这个找到问题的!很有帮助
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 我为什么要学习java 我为什么想学习大数据