分辨率自动调节html,如何让网页自适应手机屏幕分辨率_html/css_WEB-ITnose
我做的网页感觉在不同屏幕分辨率下显示效果不同,现在又什么好的办法解决这个问题没,能让网页自适应屏幕分辨率
并且布局保持不变 不管多大屏幕显示的是整个页面的放大或缩小之后的布局
回复讨论(解决方案)
width:100%;
$(window).bind('resize load', function(){$("body").css("zoom", $(window).width() / 640);$("body").css("display" , "block");});
试试呢~~
用link标签
...
...
可以试试。
又学习了,不过手机同时兼容大显示器分辨率还是不行吧。毕竟尺寸在哪里呢
用ui框架吧,或者去看看响应式设计方面的书.
ui框架:bootcss
这个可以参考参考 http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
$(window).bind('resize load', function(){$("body").css("zoom", $(window).width() / 640);$("body").css("display" , "block");});
非常感谢2楼啊
这段在做应用中嵌入网页,被嵌入的网页总被缩放,非常烦恼。
让安卓工程师加上此句后:webSettings.setSupportZoom(false); 仍旧还是被缩放。
( 加上这句 target-densitydpi=device-dpi 可强制显示真实分辨率大小)
页面所有字号大小,都按照某一宽度
比如设计图页面宽度640的,然后所有不同分辨率的手机,都按640px缩放。
再加上2楼的这段代码。就解决了大屏手机高分辨率下,字体过小的问题。而且切图时也不用考虑多种分辨率的不同css,统统按只支持640px的做就足矣!
刚开始写css的时候就应该注意到,不可以写死的宽高,要用百分比及最大最小值的设定
加上这句
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
推荐一个网站给你,我自己也是做移动端Web的。http://razorflow.com/这个是专门用于针对移动端开发的产品
还有个方法就是用base.css文件,不过用base.css文件的话不能做到在不同客户端下显示不同排版。
$(window).bind('resize load', function(){$("body").css("zoom", $(window).width() / 640);$("body").css("display" , "block");});
非常感谢2楼啊
这段在做应用中嵌入网页,被嵌入的网页总被缩放,非常烦恼。
让安卓工程师加上此句后:webSettings.setSupportZoom(false); 仍旧还是被缩放。
( 加上这句 target-densitydpi=device-dpi 可强制显示真实分辨率大小)
页面所有字号大小,都按照某一宽度
比如设计图页面宽度640的,然后所有不同分辨率的手机,都按640px缩放。
再加上2楼的这段代码。就解决了大屏手机高分辨率下,字体过小的问题。而且切图时也不用考虑多种分辨率的不同css,统统按只支持640px的做就足矣!
楼主,我最近也在做手机端开发,这两句话直接放在js和head里就可以用了吗,我的怎么没用啊
去看看jqm(jqueryMobile),或许能改变你的思路!
$(window).bind('resize load', function(){$("body").css("zoom", $(window).width() / 640);$("body").css("display" , "block");});
非常感谢2楼啊
这段在做应用中嵌入网页,被嵌入的网页总被缩放,非常烦恼。
让安卓工程师加上此句后:webSettings.setSupportZoom(false); 仍旧还是被缩放。
( 加上这句 target-densitydpi=device-dpi 可强制显示真实分辨率大小)
页面所有字号大小,都按照某一宽度
比如设计图页面宽度640的,然后所有不同分辨率的手机,都按640px缩放。
再加上2楼的这段代码。就解决了大屏手机高分辨率下,字体过小的问题。而且切图时也不用考虑多种分辨率的不同css,统统按只支持640px的做就足矣!
可是这种方法有个问题呢,火狐和Opera不支持zoom,其他手机浏览器对zoom支持度也待确定
$(window).bind('resize load', function(){$("body").css("zoom", $(window).width() / 640);$("body").css("display" , "block");});
试试呢~~
非常感谢~~~
本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源:php中文网
分辨率自动调节html,如何让网页自适应手机屏幕分辨率_html/css_WEB-ITnose相关推荐
- 网页自适应手机屏幕的几种方法
网页自适应手机屏幕的几种方法 一. 允许网页宽度自动调整 <meta name="viewport" content="width=device-width, in ...
- Webview--如何让加载进来的页面自适应手机屏幕分辨率居中显示
让Webview加载的页面居中显示有我知道的俩种方法 第一种: [java] WebSettings settings = webView.getSettings(); settings.setL ...
- 电脑分辨率自适用网页php代码,网站开发:如何让网页自适应电脑屏幕分辨率?...
网站开发:如何让网页自适应电脑屏幕分辨率? 网站开发很多人会遇到这样的问题,当你自己的电脑上精心制作好网页,却发现在他人的不同分辨率的电脑上浏览你页面时,自己的网页排版乱得一塌糊涂,或者被拉伸,或者被 ...
- Webview--如何让加载进来的页面自适应手机屏幕分辨率
让Webview加载的页面居中显示有我知道的俩种方法 第一种: [java] view plaincopy WebSettings settings = webView.getSettings(); ...
- H5网页开发新手入门-H5网页如何适应不同手机屏幕分辨率?
一.问题汇总 手机网页怎么制作? 怎么让网页适应不同手机屏幕? H5网页设计到底该设计多大尺寸? rem怎么自适应布局? H5一屛页面如何自适应屏幕? viewport该怎么写? width=devi ...
- webapp开发—手机屏幕分辨率和浏览器分辨率不要混淆
关于webApp响应式设计遇到的问题,分享给大家,最近在做一个手机webApp,因为我手机是"米3",屏幕截图大小是1080宽,所以css样式用@media screen and( ...
- Android程序对不同手机屏幕分辨率自适应的总结
各种Android操作系统的手机简直就是琳琅满目,屏幕分辨率的差异可想而知.目前比较主流的有WVGA=800x480,HVGA=480x320,另外的还有QVGA=320x240.当然还有魅族M9的D ...
- jsp页面适应手机屏幕_JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码...
手机的屏幕有大有小,移动web最好做成响应式布局,也就是自适应屏幕,没有固定宽高,这样的话,在所有手机上都可以正常显示.关于移动端页面按手机屏幕分辨率自动缩放的js,先附上代码 var phoneWi ...
- 手机整屏显示数据php,JavaScript实现移动端页面按手机屏幕分辨率自动缩放示例...
这篇文章主要介绍了移动端页面按手机屏幕分辨率自动缩放的js代码,通过阻止浏览器的默认行为各方面分析缩放的功能实现,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下. 手机的屏幕有大有 ...
最新文章
- Tomcat软件的目录结构、作用
- 青云八核服务器无限申请教程,零云旗下快速开发框架lyadmin映像使用指南(青云服务器版)...
- thinkphp3.2 学习
- 金山云最新财报:Q4营收7.27亿,同比增长81%
- boost::process::windows相关的测试程序
- 放置游戏如何成爆款?我们在《最强蜗牛》中找到了答案
- visio交换机图标_分享 | 华为交换机开局配置一本通,弱电新人学习!
- centos6.2 64安装mysql_centos6.2 64bit安装mysql+php
- 求平均数、百分率、最大值、最小值、两个字段相差秒数的SQL
- NLP算法学习路线-自己整理
- 新手机出现陌生女人照片,客服:大数据时代可能性有很多
- 【转】随机函数 rand() srand() 以及seed的原理
- android交友php,android交友约会社交APP完整源码Dating App 3.7(服务端+客户端)
- 【Linux问题】Linux修改文件出现错误E45:“readonly” option is set(add ! to override)退出不了vim
- Scratch角色的绘制与中心点
- 周杰 清华大学计算机学院,清华大学自动化系主任周杰教授访问我院并做学术报告...
- 用lambda表达式写左联查询的示例
- java小组口号,小组口号霸气
- SliceM与SliceL
- 北京国际学校ib成绩排名如何?