一个web页面既要在宽屏上显示,又要在窄屏上显示,既要在电脑上显示,又要在手机上显示,这个适配问题相当的麻烦。

其实解决电脑与手机的适配问题,一般有两个思路;一个是做判断,根据不同条件在css和js做相应的修改,一个是直接做两版,手机版和电脑版,手机版略精简。

1.宽屏与窄屏

由于现在宽屏电脑越来越频繁,所以如果再将内容宽度设为960就太不能满足要求了,所以将内容宽度设了两版分别为1190px和960px。

所有内容的外面包一个<div class="width-broad" id=“width-content”></div>这样,通过判断屏宽来修改class的值,达到修改样式的目的

js如下

<script type="text/javascript">

var bc=document.getElementById("banner-content");

if(parseInt(window.screen.availWidth) < ){

      bc.className="width_narrow";
}else{ bc.className="width_broad";
} </script>

css如下

/*控制宽度的类*/
.width_broad{width:1190px;margin:0px auto;}
.width_narrow{width:960px;margin:0px auto;}

然后,div里面的内容宽度最好用百分比,这样在内容宽度更改到960的时候,对应的内容会一并缩小。

在这样做的过程中,不知为什么小屏电脑的右侧会多出条空白条,因此屏幕下方就多了一个水平滚动条,本来应该没有这个水平滚动条的,所以我的解决办法是,在body的样式中增加一个属性如下:

body{overflow-x:hidden;}

这样电脑的适应问题基本解决了。

2.手机的适配问题

手机的屏宽一般分为

480*320     568*320   苹果

640*480

800*480

854*480

1280*720

1280*800

由于web页在手机上显示会做等比例缩小,所以在手机上显示的页面应该是宽为960的页面的等比例缩小。

这样,我在途中又遇到一个问题,就是当页面等比例缩小后页面的高度<手机屏幕的高度,这样手机屏幕的底部会出现一块空白,所以我的解决方法是通过判断是否是缩小后在手机上显示,如果是就在给它设置一套样式,使得他的页面高度>=手机屏幕的高度。

js如下:

<script type="text/javascript">

if(parseInt(window.screen.width) <=800){//边界点选为800是因为,屏幕宽度小于等于800的都是手机,都经过了等比例缩放

      $("#width-content passage").css("padding","100px");
$("#width-content .title_name").css("font-size","40px");
$("#width-content .detail").css("font-size","20px");
$("#width-content .detail").css("line-height","40px");
}
</script>
 

这样,屏幕底部的空白就消失了。

通过以上的解决后,仍然存在一个问题,那就是在屏幕竖着放的时候内容中的文字图片等仍然看起来较吃力,解决办法就是可以将屏幕横过来,这样看起来刚刚好。

以上就是我解决适配问题的方法,如有更好的办法,请留言。。

web页面的适配问题的更多相关文章

  1. 移动端web页面如何适配

    移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放 简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案 在页面中加入viewpor ...

  2. 「移动端」Web页面适配

    一.什么是移动端适配 移动端 Web 页面,就是常说的手机 h5页面.webview页面.公众号开发的网页等. 由于手机机型较多,各个手机的屏幕尺寸不一样,所以做移动端页面,需要考虑在安卓和ios的各 ...

  3. 移动端WEB页面

    百度前端技术学院第一阶段任务十一,关于移动端WEB页面布局,参考资料如下(都是一些网页链接): MDN:手机网页开发 MDN:在移动浏览器中使用viewport元标签控制布局 移动前端开发和 Web ...

  4. 常见的移动端Web页面问题

    移动端Web需要照顾触摸操作的体验,以及更多的屏幕旋转与尺寸适配等问题,非常琐碎,在这里为大家倾力总结多条常见的移动端Web页面问题解决方案,欢迎收看收藏! 1.安卓浏览器看背景图片,有些设备会模糊 ...

  5. 使用vw做移动端页面的适配

    Flexible到今天也有几年的历史了,解救了很多同学针对于H5页面布局的适配问题.而这套方案也相对而言是一个较为成熟的方案.简单的回忆一下,当初为了能让页面更好的适配各种不同的终端,通过Hack手段 ...

  6. 目标检测应用化之web页面(YOLO、SSD等)

    在caffe源码目录下的examples下面有个web_demo演示代码,其使用python搭建了Flask web服务器进行ImageNet图像分类的演示. 首先安装python的依赖库:pip i ...

  7. Web 端屏幕适配方案

    基础知识 像素相关 1.像素 :像素是屏幕显示最小的单位. 2.设备像素 :设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点. ...

  8. 移动Web开发与适配笔记

    项目要是适配手机端,想透彻的把相关内容弄清楚,现在总结一下. 一.移动端开发有如下特点: 1.跑在手机端的web 页面就是h5页面 2.具有跨平台性(web 安卓 iOS都适应) 3.基于webvie ...

  9. 任务十一:移动Web页面布局实践

    面向人群: 有一定HTML及CSS基础,想要尝试移动开发 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合 ...

随机推荐

  1. eWebeditor编辑器上传图片路径错误解决方法[疑难杂症]【转,作者:unvs】

    做了一个多版本的网站,后台用的编辑器是eWebeditor,NET版,后面发现上传图片或者文件之后,路径错误无法显示,必须手工修改才行.. 为了更清楚的说明问题,我下面会说的比较详细,首先是网站文件框 ...

  2. [ZT] Vim快捷键分类

    一. 移动:    h,j,k,l: 左,下,上,右.    w: 下一个词的词首.    e:下一个词的词尾.    b:上一个词的词首.    <>: v 模式选中后进行缩进.二. 跳 ...

  3. Cite a Website in Paper 论文中引用网页的格式

    Template: 1.A. Author Surname, 'Title', Year Published, <http://Website-Url> (accessed 10 Octo ...

  4. [转载]git 忽略某些文件

    项目中经常会生成一些Git系统不需要追踪(track)的文件.典型的是在编译生成过程中 产生的文件或是编程器生成的临时备份文件.当然,你不追踪(track)这些文件,可以 平时不用"git ...

  5. Ant Tasks 使用总结

    xmlproperty http://ant.apache.org/manual/Tasks/xmlproperty.html Ant的xmlproperty的Task能直接读取一个xml文件以生成相 ...

  6. CSS 实现背景图尺寸不随浏览器缩放而变化

    <!-- Author:博客园小dee --> 一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 再比如花瓣网( http://www.hu ...

  7. json解析json字符串时候,数组必须对应jsonObjectArray,不能对应JsonObject。否则会解析错误。

    json第三方解析json字符串时候,json数组必须对应jsonObjectArray,不能对应JsonObject.->只要是[]开头的都是json数组字符串,就要用jsonArray解析 ...

  8. css修改,类似elememt.style样式修改

    使用!important 语法优先权. .yui-b { margin-left:0px ! important; }

  9. 【Objective-C】Windows下Objective-C开发环境配置

    [Objective-C]Windows下Objective-C开发环境配置 ftp://ftpmain.gnustep.org/pub/gnustep/binaries/windows/   最近打 ...

  10. Web Service性能测试方案

    目录: 1.web Service简介 2.SoapUI介绍 3.使用SoapUI进行web service性能测试 4.使用LR进行web service性能测试 5.使用JMeter进行web s ...