1. /* 判断ipad */
  2. @media only screen
  3. and (min-device-width : 768px)
  4. and (max-device-width : 1024px){
  5. /* style */
  6. }
  1. /* ipad横屏 */
  2. @media only screen
  3. and (min-device-width : 768px)
  4. and (max-device-width : 1024px)
  5. and (orientation : landscape){
  6. /* style */
  7. }
  1. /* ipad竖屏 */
  2. @media only screen
  3. and (min-device-width : 768px)
  4. and (max-device-width : 1024px)
  5. and (orientation : portrait){
  6. /* style */
  7. }
  1. /* 判断iphone5 *//* 横屏竖屏判断方法与ipad一样 */
  2. @media only screen
  3. and (min-device-width : 320px)
  4. and (max-device-width : 568px){
  5. /* style */
  6. }

  

  1. /* 判断iphone4-iphone4s *//* 横屏竖屏判断方法与ipad一样 */
  2. @media only screen
  3. and (min-device-width : 320px)
  4. and (max-device-width : 480px){
  5. /* style */
  6. }
  1. /* iphone5分辨率 */
  2. screen Width = 320px (css像素)
  3. screen Height = 568px (css像素)
  4. screen Width = 640px (实际像素)
  5. screen Height = 1136px (实际像素)
  6. Device-pixel-ratio:2
  1. /* iphone4-iphone4s分辨率 */
  2. screen Width = 320px (css像素)
  3. screen Height = 480px (css像素)
  4. screen Width = 640px (实际像素)
  5. screen Height = 960px (实际像素)
  6. Device-pixel-ratio:2

  

媒体查询判断ipad和iPhone各版本的更多相关文章

  1. 媒体查询判断ipad与iPhone各版本i

    /* 判断ipad */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px){ /* s ...

  2. JQuery 判断IPad、IPhone、Android是横屏还是竖屏(Window.Orientation实现)

    在ipad.iphone网页开发中,我们很可能需要判断是横屏或者竖屏.下面就来介绍如何用 jQuery 判断iPad.iPhone.Android是横屏还是竖屏的方法. 代码如下: function ...

  3. 基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码

    在ipad.iphone网页开发中,我们很可能需要判断是横屏或者竖屏.下面就来介绍如何用 jQuery 判断iPad.iPhone.Android是横屏还是竖屏的方法 其实主要是通过window.or ...

  4. 基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏

    function orient() {if (window.orientation == 90 || window.orientation == -90) {//ipad.iphone竖屏:Andri ...

  5. [JS代码]如何判断ipad或者iphone是否为横屏或者竖屏 - portrait或者landscape

    //判断横屏或者竖屏 function orient() { //alert('gete'); if (window.orientation == 0 || window.orientation == ...

  6. 运用CSS3媒体查询判断iPhoneX、iPhoneXR、iPhoneXS MAX及横竖屏

    //iphoneX.iphoneXs @media only screen and (device-width: 375px) and (device-height: 812px) and (-web ...

  7. css3媒体查询判断移动设备横竖屏

    /* 设备竖屏时调用该段css代码 */ @media all and (orientation : portrait){ body{   background-color:blue;  } } /* ...

  8. 媒体查询ipad,pc端

    媒体查询 /* 判断ipad */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px){ ...

  9. 媒体查询(pc端,移动端不同布局)

    媒体查询语法: 1.内联写法:and之后必须有空格@media screen and (min-width:960px //判断浏览器大小条件){body{background:red} //常规的样 ...

随机推荐

  1. codePrinter

    3天前,荆老师给了我一台打印机,让我完成省赛代码打印系统的测试. 打印机型号为 HP P1007,算是一台比较老的打印了. 本文记录了从打印机驱动安装到代码打印WEB部署的全过程 1. 安装打印机驱动 ...

  2. java中Class对象详解和类名.class, class.forName(), getClass()区别

    一直在想.class和.getClass()的区别,思索良久,有点思绪,然后有网上搜了搜,找到了如下的一篇文章,与大家分享. 原来为就是涉及到Java的反射----- Java反射学习 所谓反射,可以 ...

  3. Html文档流和文档对象模型DOM理解

    前言 在理解浮动和定位时,触碰到文档流概念.为了更好理解浮动和定位,学习了文档流和DOM(文档对象模型). 正文 DOM(文档对象模型)简单理解就是编写的html页面所有内容构成的树形结构.例如: 根 ...

  4. ClearContainer 网络部分源码分析

    // cc-oci-runtime/src/oci.c /*! * Create the state file, apply mounts and run hooks, but do not star ...

  5. hibernate报ExceptionInInitializerError错误

    今天在练习hibernate的criteria接口查询时候报了错: java.lang.ExceptionInInitializerError at test.testThisPro.createCr ...

  6. django博客功能实现——标签功能

    标签功能添加流程 0.功能概括 标签作为文章中的分类标记,会显示出该文章是关于哪一方面的文章,比如是关于python的还是关于django的. 当我们点击该标签的时候,会出现该博客中所有属于该标签的文 ...

  7. Python函数作用域的查找顺序

    函数作用域的LEGB顺序 1.什么是LEGB? L:local 函数内部作用域 E:enclosing 函数内部与内嵌函数之间 G:global 全局作用域 B:build-in 内置作用域 2.它们 ...

  8. c#读写xml文件

    using System; using System.Collections.Generic; using System.Xml; using System.Text.RegularExpressio ...

  9. 由于log太多导致ubuntu硬盘空间满了,进入不了系统解决办法

    具体现象是在图形界面输入用户名和密码之后,再次提示需要输入用户名和密码. 步骤一:按快捷键进入命令行界面.ctrl+alt+f1. 步骤二:清空文件 clear log cd /var/log sud ...

  10. jQuery基础课程

    环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...