How to Apply CSS Media Queries for different mobile devices (Html 5 App)


Media Queries

"The Media Queries consists of a media type and zero or more expressions that check for the conditions of particular media features."
  Features  like : 
  • Browser window (width and height ).
  • Device screen size (width and height) & Resolution.
  • Orientation (landscape or portrait mode).
  • Resolution. 
iPhone :

//iPad 1, iPad 2, iPad Mini
  • @media only screen and (min-width: 768px) and (-webkit-device-pixel-ratio: 1)

//iPad 3, iPad 4
  • @media only screen and (min-width: 768px) and (-webkit-device-pixel-ratio: 2) 

//iPhone 3G
  • @media only screen and (min-width: 320px) and (-webkit-device-pixel-ratio: 1)  

//iPhone 4
  • @media only screen and (device-width: 320px) and (-webkit-device-pixel-ratio: 2)  

//iPhone 5

  • @media only screen and (min-width: 320px) and (min-height: 568px) and (-webkit-device-pixel-ratio: 2)  

//iPhone 6
  • @media only screen and (min-width: 375px) and (min-height: 667px) and (-webkit-device-pixel-ratio: 2)  

//iPhone 6 Plus
  • @media only screen and (min-width: 414px) and (min-width: 736px) and (-webkit-device-pixel-ratio: 3)  

Android :


//HTC One, Samsung Galaxy S5, OnePlus One
  • @media only screen and (min-width: 360px) and (-webkit-device-pixel-ratio: 3)

//Samsung Galaxy S2
  • @media screen and (min-width: 320px) and  (-webkit-device-pixel-ratio: 1.5)

//Samsung Galaxy S3
  • @media only screen and (min-width: 320px) and (-webkit-device-pixel-ratio: 2)  

//Samsung Galaxy S4
  • @media only screen and (min-width: 320px) and (-webkit-device-pixel-ratio: 3)  

//LG Nexus 4
  • @media screen and (min-width: 384px) and (-webkit-device-pixel-ratio: 2)

//LG Nexus 5, Huawei Ascend P7
  • @media only screen and (min-width: 360px) and (-webkit-device-pixel-ratio: 3)

//Asus Nexus 7
  • @media only screen and (min-width: 601px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332)  

and more other devices 

Desktop Browser :

  • @media only screen and (min-width:1025px)

  • @media only screen and(min-width:1281px)
 and more ...

Popular posts from this blog

Cordova Plugin Firebase Cloud Messaging For Android

Image
Firebase Notifications is a free service that enables targeted user notifications for mobile app developers. Built on Firebase Cloud Messaging and the FCM SDK, Firebase Notifications (Notifications) provides an option for developers and organizations seeking a flexible notification platform that requires minimal coding effort to get started, and a graphical console for sending messages. Using the Notifications console GUI, you can reengage and retain your user base, foster app growth, and support marketing campaigns. Reference:  Firebase Cloud Messaging First Create project on  console firebase Download google-services.json file on firebase console and add "platform/android" path. Like below image : Master branch: cordova plugin add https://github.com/LokeshPatel/Cordova-Plugin-FCMNotification.git local folder: cordova plugin add Cordova-Plugin-FCMNotification -- Search local path After Install Plugin Need To Update On "build.gradle" F
Read more

iOS Phonegap app share extension (images) with ionic

Image
iOS Phonegap app share extension (images) with ionic Share extensions give users a convenient way to share content with other entities, such as social sharing websites or upload services. For example, in an app that includes a Share button, users can choose a Share extension that represents a social sharing website and then use it to post a comment or other content.    Link            In iOS Share extension create new share project in existing project.                                    1) Create and add share extension project on your app. File >>New >>Target ...>>Application Extension >>Share Extension >>Next (Click on).          2) Add share Project Details : product name ,Organization identifier ...etc .. >> finish.                            3) Replace : ShareViewController.h and ShareViewController.m file.              4) Add Content Handle Plugin files on share project         
Read more

Print Hand Plugin With Cordova/PhoneGap For Android.

                                         Print Hand Integration This document described integration with PrintHand, a mobile printing application for Android devices. The purpose of integrating with PrintHand is to provide printing capabilities to applications. There are different ways to integrate with PrintHand depending on the application, its content and other requirements. You can check our  sample application on GitHub  that shows possible integration options. This project requires Android Studio. Cordova Plugin on GitHub  More details  Printhand Doc Try to implement Cordova plugin with PrintHand for Android app. Plugin used .jar files for integration printhand plugin. intentAPI-7.4.5-sources.jar, printingSDK-7.4.5-sources.jar Master branch: cordova plugin add https://github.com/LokeshPatel/Cordova-Plugin-PrintHandPlugin.git Local folder: cordova plugin add Cordova-Plugin-PrintHandPlugin --searchpath path Android Studio tools require build.gradle
Read more