精华内容
下载资源
问答
  • CSS3根据不同的PC屏幕(浏览器)分辨率显示网站相同内容放大或者缩小 举例:我们一个网站,网页需要在两款不同的电脑,分辨率不同的电脑上显示,一个大分辨率是1920x1080,一个是小分辨率1366x768 可能我们做的页面...

    CSS3根据不同的PC屏幕(浏览器)分辨率显示网站相同内容放大或者缩小

    举例:我们一个网站,网页需要在两款不同的电脑,分辨率不同的电脑上显示,一个大分辨率是1920x1080,一个是小分辨率1366x768 可能我们做的页面是按照大分辨率做的,到小分辨率上显示会有出入,页面垮掉,这时我们就需要在小分辨率上更改内容的显示,将整个页面或者页面的某个部分内容在小分辨率上单独放大或者缩小

    使用@media 和zoom属性

    例如我们想在小分辨率1366x768缩小内容为在大分辨率1920x1080 90%效果展示 。在style标签中 我们可以这样做

    /* 当屏幕分辨率不超过1400px的时候将body内容缩放成90% */
    		@media screen and (max-width: 1400px) { 
    		.bodys{
    			zoom: 90%;
    			} 	
    		}
    

    这样当我们屏幕不超过1400px的时候就会将整个页面进行缩放成90%,当超过了1400px的时候会按原来的100%比例,当然你如果有需要可以多设置几个规则。

    .bodys是在 body标签上加的class,使得我们整个页面都按照这个比例进行缩放。当然你也可以在页面的局部,某个div这个做,我们还可以在.bodys里面更改样式,使得在不同分辨率的屏幕上展示不同的效果。

    展开全文
  • 解决手机访问网站时整体相对屏幕缩小问题?(已解决)自己开发出来的网站,在手机上访问时,总是整体小了一块,能很好的适应屏幕,每次都要用手指再放大到合适尺寸,发现,需要在开发代码中添加:<meta ...

    解决手机访问网站时整体相对屏幕缩小问题?(已解决)

    自己开发出来的网站,在手机上访问时,总是整体小了一块,不能很好的适应屏幕,每次都要用手指再放大到合适尺寸,后发现,需要在开发代码中添加:

    <meta name="viewport" content="width=device-width, initial-scale=1">  (可添加到第一行)


    参数说明:
    width - viewport的宽度 height - viewport的高度
    initial-scale - 初始的缩放比例
    minimum-scale - 允许用户缩放到的最小比例
    maximum-scale - 允许用户缩放到的最大比例
    user-scalable - 用户是否可以手动缩放
    此参数说明参考:http://www.2cto.com/kf/201308/240021.html

    如果是想要一打开网页,则自动以原始比例显示,并且不允许用户修改的话,则是:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    ================================================ [另一种方法]

    把这段

    <!DOCTYPE ........>

    替换为这段

    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

    注:此方法在iPhone下横屏时宽度会超过屏幕宽度出现滚动条,解决方法就是加上方法一的代码

    参考:http://www.strongfire.cn/article/319.html

    展开全文
  • 网站在手机上缩小显示整个页面

    千次阅读 2019-03-06 16:17:09
    &lt;meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-...通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,...
    <meta name="viewport"
              content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    

    去掉这句话就可以了
    原理是什么?
    通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。在默认情况下,一般来讲,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或1024px(也可能是其它值,这个是由设备自己决定的),但带来的后果就是浏览器会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

    展开全文
  • 手机网站自适应屏幕大小方法总结1

    千次阅读 2016-03-05 22:56:59
    手机网站自适应方法总结1、使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了能兼容所有浏览器或系统。 首先解释该标签...

    手机网站自适应屏幕大小方法总结1##

    ps:本人亲测,阿里云2核4G5M的服务器性价比很高,新用户一块多一天,老用户三块多一天,最高可以买三年,感兴趣的可以戳一下:阿里云折扣服务器

    1、使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

    首先解释该标签的含义:

    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    

    如果你完全不了解这个标签的使用需要先百度一下。

    解释:content中的“width” 这个width指的是什么宽度,我看过的文章对这个都没有解释的很清楚,有几个备选:虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等?经试验这个指的是虚拟窗口的宽度。了解宽度之后,对后续的各种scale,就应该知道是谁与谁的比例,是 虚拟窗口宽度 / 页面宽度,这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸,当然有些浏览器会自动缩放使其适应屏幕,但这不是统一标准,正确的做法是用js动态生成此标签,当然,应该先获取屏幕尺寸。
    对于此标签还有以下需要分享:

    1)、user-scalable=no就一定可以保证页面不可以缩放吗?NO,有些浏览器不吃这一套,还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。

    2)、initial-scale=1.0 初始缩放比例受user-scalable控制吗?不一定,有些浏览器会将user-scalable理解为用户手动缩放,如果user-scalable=no,initial-scale将无法生效。

    3)、手机页面可以触摸移动,但是如果有需要禁止此操作,就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。

    4)、如果页面是经过缩小适应屏幕宽度的,会出现一个问题,当文本框被激活(获取焦点)时,页面会放大至原来尺寸。

    **2、**第二种自适应屏幕尺寸的方法是将页面做成980宽度,在没有viewport标签的情况下,移动设备屏幕范围会显示页面980的宽度,如果页面大于980,则在屏幕范围内显示页面一部分,如果页面小于980,则页面居中两侧显示空白,那么你猜,如果页面宽度等于980会出现什么情况呢?

    3、百分比法,首先应明确一个概年,CSS中的百分比中的百指的是什么,我告诉你指的是父元素,所有百分比都是这样的。子元素宽度50%,那么父元素的宽度就是百,子元素的padding-left:50%,父元素的宽度是百,子元素的margin-top:20%,那么父元素的高是百。所以body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面实现很困难。

    4、使用css3单位rem,有人这样解释rem,root-em,就是根部的em,想必em大家都懂的,那么rem就是将根节点html的font-size的值作为整个页面的基准尺寸,默认html的font-size是16px,即1rem=16px,如果某div宽度为32px你可以设为2rem。当我们把html的font-size设为20px时,1rem=20px,那么32px=1.6rem了。到这里我们也就了解了rem的用法了,那么怎么用rem来实现不同尺寸屏幕的自适应呢?在页面载入开始时首先判断window的宽度(是window的宽度($(window).width()),不是屏幕分辩率的宽度(screen.width),两者的差别请自行查阅),假设宽度为W,一个div在宽度为640px的设计稿的下的宽度为dW1,这样如果html的font-size为100px,那么这个div的宽度用rem表示是多少呢?计算:div宽度dW2=dW1/100,px与rem之间很好换算,除以100就可以,这是假定屏幕宽度为640的,而不同宽度的屏幕怎么处理,为了能保证换算容易那就要为html设置一个合适的font-size,计算:100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4;
    解释一下为什么把100作为一个缩放比例,用10或1不是更方便吗,这是因为大多数浏览器font-size的最小值为12px,所以只能用100了。

    5、媒体查询,媒体查询也是css3的方法,我们要解决的问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生,媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等,比如我们要为宽度小于480px的页面中的class="icon"的元素设置样式,可以这样写,@media screen and (max-width=480px) {.icon{ some styles }};这里仅介绍这种思路,关于媒体查询的详细用法请参阅css手册。
    综上,至今,我没有找到一种完全适应各种屏幕的方法,只能根据页面特点选择不同的方法。

    展开全文
  • Android 屏幕适配解决方案大全
  • 部分字体变成了两排。图中可以看到,宽度我设置的是百分比。到底是啥原因?字体我用的rem, 另:如果是字体不会随着网页改变大小而造成样式乱掉的问题又该怎么解决pc端网页字体大小自适应的问题。 腾讯课堂的页面...
  • 屏幕适配

    千次阅读 2013-08-03 17:04:28
     对应用程序而言,Android系统提供一致的跨设备的开发环境并且处理适配不同显示屏幕的大部分工作。同时,系统提供API,允许针对不同的屏幕尺寸和密度来控制的应用程序UI,从而为不同的屏幕配置来优化UI设计。 尽管...
  • 屏幕摄像机

    2013-07-06 12:22:28
    “Loading 进度条”选项:如果选中此选项,那么生成的SWF文件在网页(网站)上播放时会显示下载的进度条,等下载完成才开始播放,防止播放过程中用户需要等待缓存。只有在网站的网页上播放swf文件才会看到效果,在...
  • Android 屏幕适配

    千次阅读 2015-03-03 17:40:11
     对应用程序而言,Android系统提供一致的跨设备的开发环境并且处理适配不同显示屏幕的大部分工作。同时,系统提供API,允许针对不同的屏幕尺寸和密度来控制的应用程序UI,从而为不同的屏幕配置来优化UI设计。 尽管...
  • 远程屏幕监控系统

    千次阅读 2018-05-12 20:41:13
    近期整理代码的时候,发现大二的时候(目前大三)做的几个课程设计还不错,所以把这部分的代码以及设计文档都开源出来,以供者参考学习使用。 完整代码以及本文的word都在放在了Github上,你可以下载或使用它:...
  • 由于IE6/IE7/IE8还有很大一部分用户,为了让网站浏览者都能正常的访问HTML5网站 */ <!--外壳--> <!--上面部分--> <a href="#">111 <a href="#">222 <a href="#">111 <a href="#">222 ...
  • Webview能很好的显示

    2013-09-29 06:52:28
    下面是我的 xml 代码: ...现在的问题是如果用户想放大或缩小的时候,我想让这个网站能适配电脑屏幕。 但是现在当加载 url 时,用户只能看到网站的左上角,可以滚动到视图的其它部分。请问如何修改呢?
  • 前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去...具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看看,讲解的很傻瓜化。     好,下面我们来看看如何实现如上面右
  • 问题描述 部分用户访问网站时,检测日志出现url(http://www.xxx.cn/browserconfig.xml)这个返回404.网上一搜才知道,这是ie11的磁贴(https://msdn.microsoft.com/library/dn455106(v=vs.85).aspx)配置文件。当...
  • Android 屏幕适配方案

    千次阅读 2015-12-15 19:29:03
    转载:http://blog.csdn.net/lmj623565791/article/details/45460089 转载请标明出处:  ...  本文出自:【张鸿洋的博客】 1、概述 ...大家在Android开发时,肯定会觉得屏幕适配是个尤其
  • 在外贸网站建设的时候,发现在 iPad 的 Safari 浏览器中背景显示不全,定位到该 div 发现所指定 css 的宽度为 100%, 到百度搜索发现,safari 中 viewport 默认宽度为 980px,若事先未指定其初始 viewport 宽度...
  • mac 界面以及界面浏览器等显示不

    千次阅读 2019-09-26 14:52:35
    mac右上角点击小人图标-----辅助功能偏好设置--缩小快捷键 转载于:https://www.cnblogs.com/pikachuworld/p/11356779.html
  • android 屏幕适配的总结,适合面试

    千次阅读 2016-08-09 13:28:06
    1.支持各种屏幕尺寸: 使用wrap_content, match_parent...2.使用相对布局,禁用绝对布局在开发中,我们大部分时候使用的都是线性布局、相对布局和帧布局,绝对布局由于适配性极差,所以极少使用。 3.使用尺寸限定符。通
  • 手机屏幕类型分析

    万次阅读 2012-07-03 17:35:40
    LCD的采用已经比较久远了,他就是指普通的液晶显示屏幕。有时LCD也可与TFT的名称通用,这里谈到的TFT属于LCD的一个子分类。通常认为,OLED在技术上比LCD是要更为先进的,不过OLED发展仍成熟,LCD的采用还相对普遍...
  • 问题 pc端web页面开发时,发现...故此,在页面devicePixelRatio(设备像素比例)变化,通过计算页面body标签zoom修改其大小,来抵消devicePixelRatio带来的变化。 解决所用JS /** * @author trsoliu * @date...
  • 探索海拉鲁 Explore Hyrule 是一个网站,旨在推广 Nintendo Switch的《塞尔达传说:旷野之息》视频游戏。 该网站旨在展示游戏的功能... 设计始终忠于线框,但在较大屏幕的情况下,页面顶部的英雄图像缩小到小于 100% 的
  • 创建您自己的视频点播网站复杂。上传一些视频,然后供人们观看。就这么简单。但是如果您想要做很多视频,则必须将它们组织起来。这个 “ 使用 PHP 创建自己的视频点播网站 ” 教程系列包括三部分,将带您...
  • 网站前端性能优化终极指南

    千次阅读 热门讨论 2021-08-09 08:47:23
    在成功的电子商务网站中,图像是至关重要的一部分。在你的产品页面上添加大量的照片、图像和图形可以提高用户粘性。使用图片的负面影响是,它们通常是大文件,会减慢网站的速度。 在影响图像质量的情况下减小图像...
  • 手机屏幕适配技术预研

    千次阅读 2011-08-25 09:28:31
    随着手机屏幕的不断的变化,同时也遇到一些用户手机屏幕还是处于240*320这种屏幕的大小,当然也存着在一些规则的屏幕分辨率心寸大小。对于很多的UI来说,不同的手机屏幕很多时候得出多套的图才能保证手机客户端在...
  • 2.NORMAL:正常显示不做任何渲染 3.SINGLE_COLUMN:把所有内容放大webview等宽的一列中 用SINGLE_COLUMN类型可以设置页面居中显示,页面可以放大缩小 ,但这种方法不怎么好,有时候会让你的页面布局走样而且我...
  • 在移动设备全球流行的大趋势下,越来越多的企业开始致力于构建一...除了需要学会解决浏览器兼容性和屏幕分辨率的两个传统问题,还应当进一步了解如何开发充分考虑布局和用户交互,可良好运行在所有设备上的网站。 在
  • @media screen实现屏幕自适应内容详解

    千次阅读 2017-05-25 12:52:04
    用户是否可以手动缩放(默认设置为no,因为我们希望用户放大缩小页面)    准备工作2:加载兼容文件JS 因为IE8既支持HTML5也支持CSS3 Media,所以我们需要加载两个JS文件,来保证我们的...
  • 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度?  什么是dp、dip、dpi、sp、px?他们之间的关系是什么?  什么是mdpi、hdpi、xdpi、xxdpi?如何计算和区分? 在下面的内容中我们将介绍这些概念。 屏幕尺寸 屏幕...
  • 今天抽空再写一篇~之前已经做了两个Demo,主要是运用CSS+Html完成的,今天还是来完成一个Demo,搭建一个关于宠物的网站。在开始之前我们先介绍一个知识点,关于适配的。 其实对于学习前端来说,H5手机适配也是一个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,283
精华内容 5,313
关键字:

网站屏幕缩小后部分不显示