- 浏览: 434080 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
IThead:
纠结了几天,用了你的方法,现在解决了,谢谢!
Eclipse 写Javascript卡死问题 -
Rubicon__:
你好,我在运用PageWidget这个类时,出现第一页翻到第二 ...
android翻书效果实现原理( 贝塞尔曲线绘制原理/点坐标计算) -
lionios:
如果不显示printDialog,则打印出来的是空白页,请问你 ...
Print打印机例子 -
rayln:
weiqiulai 写道哥们儿,我怎么没有看到监控队列的配置和 ...
JMS监听MQ实例 -
weiqiulai:
哥们儿,我怎么没有看到监控队列的配置和代码?
JMS监听MQ实例
http://www.w3cplus.com/css3/css3-media-queries-for-iPhone-and-iPads
那么以后大家在iPhone4和iPad设备上,就可以按照横竖板来定样式了:
1、iPhone4竖板
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait){
/*你的样式写在这里*/
}
2、iPhone横板
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape),
only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape){
/*你的样式写在这里*/
}
3、iPad竖板
@media screen and (max-device-width: 768px) and (orientation: portrait) {
/*你的样式写在这里*/
}
4、iPad横板
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
/*你样式写在这里*/
}
上面四种CSS3 Media Queries就是用来对付iPhone4和iPad的,至于其他的运用,大家参考下面我重新整理的CSS3 Media Queries模板:
CSS3 Media Queries 模板:
1、Smartphones (竖板和横板)
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="smartphones.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)" />
2、Smartphones (横板)
@media only screen and (min-width : 321px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="smartphones-landscape.css" media="only screen and (min-width : 321px)" />
3、Smartphones (竖板)
@media only screen and (max-width : 320px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="smartphones-portrait.css" media="only screen and (max-width : 320px)" />
4、iPad(竖板和横板)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)" />
5、iPad横板
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)" />
6、iPad的竖板
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)" />
7、Desktops and laptops
@media only screen and (min-width : 1224px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="desktops-and-laptops.css" media="only screen and (min-width : 1224px)" />
8、Large screens
@media only screen and (min-width : 1824px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="large-screens.css" media="only screen and (min-width : 1824px)" />
9、iPone4
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5)" />
10、iPhone4竖板
@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait), only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait){
/*你的样式写在这里*/
}
//===或者====//
< link rel="stylesheet" href="iphone4-portrait.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait), only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait)" />
11、iPhone4横板
@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape),only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape){
/*你的样式写在这里*/
}
//===或者====//
< link rel="stylesheet" href="iphone4-landscape.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape),only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape)" />
上面罗列了常用的CSS3 Media Queries模板,特别是在移动设备上的几种,希望对大家在今后的移动开发端上的运用有所帮助。当然CSS3 Media Queries的运用条件往往不只这些,大家完全可以根据自己的需求去定义不同的条件,但个人建议,使用CSS3 Media Queries采用主流就Ok了。随着潮流走嘛。那么今天就扯到这了。如果大家有更好的经验,可以通过下面的评论与我们一起分享。
2012年04月16日更新:iPad 3 Media Query
@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2)
{
// your CSS
}
如需转载烦请注明出处:W3CPLUS
那么以后大家在iPhone4和iPad设备上,就可以按照横竖板来定样式了:
1、iPhone4竖板
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait){
/*你的样式写在这里*/
}
2、iPhone横板
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape),
only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape){
/*你的样式写在这里*/
}
3、iPad竖板
@media screen and (max-device-width: 768px) and (orientation: portrait) {
/*你的样式写在这里*/
}
4、iPad横板
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
/*你样式写在这里*/
}
上面四种CSS3 Media Queries就是用来对付iPhone4和iPad的,至于其他的运用,大家参考下面我重新整理的CSS3 Media Queries模板:
CSS3 Media Queries 模板:
1、Smartphones (竖板和横板)
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="smartphones.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)" />
2、Smartphones (横板)
@media only screen and (min-width : 321px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="smartphones-landscape.css" media="only screen and (min-width : 321px)" />
3、Smartphones (竖板)
@media only screen and (max-width : 320px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="smartphones-portrait.css" media="only screen and (max-width : 320px)" />
4、iPad(竖板和横板)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)" />
5、iPad横板
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)" />
6、iPad的竖板
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)" />
7、Desktops and laptops
@media only screen and (min-width : 1224px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="desktops-and-laptops.css" media="only screen and (min-width : 1224px)" />
8、Large screens
@media only screen and (min-width : 1824px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="large-screens.css" media="only screen and (min-width : 1824px)" />
9、iPone4
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5)" />
10、iPhone4竖板
@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait), only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait){
/*你的样式写在这里*/
}
//===或者====//
< link rel="stylesheet" href="iphone4-portrait.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait), only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait)" />
11、iPhone4横板
@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape),only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape){
/*你的样式写在这里*/
}
//===或者====//
< link rel="stylesheet" href="iphone4-landscape.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape),only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape)" />
上面罗列了常用的CSS3 Media Queries模板,特别是在移动设备上的几种,希望对大家在今后的移动开发端上的运用有所帮助。当然CSS3 Media Queries的运用条件往往不只这些,大家完全可以根据自己的需求去定义不同的条件,但个人建议,使用CSS3 Media Queries采用主流就Ok了。随着潮流走嘛。那么今天就扯到这了。如果大家有更好的经验,可以通过下面的评论与我们一起分享。
2012年04月16日更新:iPad 3 Media Query
@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2)
{
// your CSS
}
如需转载烦请注明出处:W3CPLUS
发表评论
-
文字实现水平垂直居中
2014-01-11 09:58 959文字实现水平垂直居中的关键代码: display: ... -
小兔快跑
2013-11-20 15:42 653<!DOCTYPE html PUBLIC " ... -
box-sizing使用
2013-07-17 13:32 724box-sizing : content-box || bor ... -
如何通过CSS3的Clip制作饼图
2013-05-10 16:46 1067CSS3是个非常强大的玩意, 大家可以看看我的例子, 可以实现 ... -
CSS3的keyframe动画介绍
2013-05-07 13:50 544#sun.VeryHuo { animation-name ... -
CSS3 Media Queries
2013-04-27 10:44 869转载: http://www.w3cplus.co ... -
Three.js的模型软件Blender
2013-04-09 14:41 1228使用Blender软件可以非常简单的导出3D模型为json字符 ... -
本地文件拖拽到浏览器
2013-03-19 13:22 1111利用HTML5的File API可以实现文件拖拽到服务器上 直 ... -
最简单的拖拽效果
2013-01-28 16:46 815html5中提供了drag的效果, 通过事件可以进行拖拽元素, ... -
斜坡算法
2013-01-17 16:52 1508斜坡算法, 通过canvas画斜坡的算法, 知道这个算法后, ... -
如何创建一个Chrome应用
2013-01-08 15:48 0看附件的详细介绍 -
Canvas宝典
2012-12-13 15:35 739Canvas宝典, 神器!! -
CSS区分横屏和竖屏
2012-09-21 14:57 1301如何区分横屏和竖屏, 在CSS中? //竖屏 @media ... -
利用HTML5的WebGL制作的3D图形
2012-06-27 14:55 1666这里介绍一篇翻译的文章, 写的非常好, 大家可以去看看WebG ... -
KinticJs的基本用法
2012-06-11 15:42 972Kintic是html5中canvas的一个框架,效率高,包小 ... -
CSS3伪类选择器
2012-06-03 15:38 909CSS3的一个伪类选择器“:nth-child()”。 语法: ... -
canvas是如何绘画基本shape的(矩形、直线、圆弧、贝赛尔曲线)
2012-05-04 15:43 1780转载: http://www.cnblogs.com/amtf ... -
input框语音功能
2012-04-06 12:26 978Webkit内核的input框带有语音功能, 请看实例 &l ... -
-webkit-内核滚动条样式覆盖
2012-02-23 21:18 1798今天看了下Chrome的网上商城, 感觉他们的滚动条很特别. ... -
CSS3 Border-Image图片裁剪用法
2012-02-17 01:17 1566转载:http://www.zhangxinxu.com/wo ...
相关推荐
4. 响应式设计:现代网页通常需要适应不同设备的屏幕尺寸,CSS3的媒体查询(Media Queries)让我们可以根据设备特性调整样式,确保图片切换效果在手机(如iPhone)、平板(如iPad)、台式机(如iMac)和智能手表(如...
《iPhone WebApp 开发指南》是一份详尽的PDF文档,专为开发者揭示了在iPhone平台上构建Web应用程序的独特技术和策略。这份文档深入探讨了如何利用iOS浏览器的特性,特别是Safari,来创建出与原生应用体验相媲美的Web...
1. **响应式设计**:为了在iPad这样的不同屏幕尺寸和分辨率的设备上提供一致的用户体验,开发者通常会使用媒体查询(Media Queries)来实现响应式布局。 2. **触摸事件**:在触屏设备上,CSS可以与JavaScript结合,...
6. **触摸事件**:考虑到移动设备的使用,可能添加了对触摸滑动的支持,使得在iPhone或iPad上也能顺畅操作。 总的来说,"iPhone5s页面全屏幻灯片滚动"是一个集视觉设计、交互体验和前端技术于一体的网页组件,它...
这种设计的关键在于媒体查询(Media Queries),它可以根据设备特性如宽度、高度和分辨率来应用不同的CSS样式。 2. **应用技术开发**:这涉及到应用程序的创建、测试和发布过程,包括选择合适的编程语言(如Swift ...
在描述中提到的设备包括iPhone4/4s、iPhone5/5c/5s、iPhone6/Plus以及iPad竖屏,这些都是市场上常见的移动设备,它们代表了不同的屏幕分辨率和比例。响应式布局的目的是让网页内容在这些设备上能够自动调整布局,...
关键在于使用流式布局(Fluid Grids)、弹性图片(Flexible Images)和媒体查询(Media Queries)这三个核心原则。流式布局允许元素宽度基于百分比而不是固定像素,弹性图片则确保图片大小会根据容器大小变化,而...
3. **响应式设计**:苹果产品覆盖了多种设备,从iPhone到iPad再到Mac,因此,这段代码可能考虑了不同屏幕尺寸的适配,采用媒体查询(media queries)来确保在不同设备上都能正常显示。 4. **无障碍访问...
通过媒体查询(media queries),开发者可以实现响应式设计,使应用在不同尺寸的iOS设备上都能有良好的显示效果。CSS还支持动画和过渡效果,这些在创建动态用户界面和交互时非常有用。 文件名“iphone-app-main”...
本模板采用这一策略,通过CSS3的媒体查询(Media Queries)来判断设备的屏幕尺寸,进而应用不同的样式规则。这样,无论用户使用的是iPhone、Android手机还是iPad,都能获得合适的布局和界面。 三、响应式设计: ...
2. **媒体查询(Media Queries)**:CSS3引入的媒体查询是一种更推荐的方法,它允许我们根据设备的特性(如视口宽度、屏幕比例等)应用不同的样式。例如,`@media screen and (max-width: 768px) { ... }`将针对小于...
2. **Responsive Web Design(响应式设计)**:为了确保在不同尺寸的iPhone屏幕上都能良好显示,开发者会采用响应式设计,利用媒体查询(Media Queries)等技术调整布局,使网页适应不同设备的屏幕大小。 3. **iOS...
例如,我们可能需要使用媒体查询(media queries)来实现自适应布局,使播放器在iPhone、iPad甚至是Mac等不同屏幕尺寸下都能正确显示。 1. **布局**:在CSS3中,Flexbox和Grid布局系统极大地提高了布局设计的灵活性...
此外,还可以利用CSS媒体查询(Media Queries)来根据设备屏幕尺寸判断,但这主要适用于响应式设计,而不是准确识别设备类型。 总之,判断请求来源是PC还是移动端,主要是通过分析"User-Agent"头信息。开发者可以...
它们可能包含了各种不同设备尺寸的模拟器,如iPhone4/4s到iPhone6/Plus,以及iPad的竖屏模式。通过这些模拟器,开发者可以直观地查看网页在不同设备上的显示效果。 2. **css** 文件夹:这里包含了CSS样式表,其中...
通过CSS的媒体查询(Media Queries)可以根据设备的视口大小自动调整布局,提供一致的用户体验。 5. **检测逻辑**: - 检测逻辑可能包括对`User-Agent`的分析,也可能结合屏幕分辨率、触屏事件等其他特性。一些...
2. **媒体查询(Media Queries)**:在移动设备上,使用媒体查询可以实现响应式设计,确保页面在不同屏幕尺寸下都能正确显示。在"苹果alpha-html"中,可能使用了媒体查询来针对苹果设备的屏幕尺寸进行定制布局。 3....
CSS3引入了媒体查询(Media Queries),允许我们根据设备特征来应用不同的样式。JavaScript也可以监听这些查询,以判断设备类型: ```javascript function isMobileDevice() { return window.matchMedia("(max-...