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.       ...
Read more

Cordova plugin Crop Image in Android

Image
 Cordova plugin Crop-Image in android Cordova plugin Crop Image using camera and gallery With Cordova/Phonegap android application before install this plugin must you have install  cordova camera plugin                           Crop-View                                               Crop-Image show on HTML                             1) Image take using camera method : Success return base64 image format navigator.cropimage.getPictureAndCrop(function(resultBase64){ // result in base64 image format console.log(resultBase64); }, function(error){ console.log(error); }); 2) Image take using gallery method : Success return base64 image format navigator.cropimage.getGalleryPictureA...
Read more