"Iphone Screen Sizes"
Bootstrap 4.1.1 Snippet by imsachin

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Animated </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> </head> <body> <div class="container bod mrT40"> <div class="row"> <div class="col-md-12 text-center"> <h2>IPhone Screen Sizes</h2> <p>Online-link for display iphone sizes:-https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html</p> </div> </div> <div class="table-responsive"> <table class="table" > <tr> <th>Device</th> <th>Native Resolution (Pixels)</th> <th>UIKit Size (Points)</th> <th>Native Scale factor</th> <th>UIKit Scale factor</th> </tr> <tr style="vertical-align: middle;"> <td height="50">iPhone X</td> <td>1125 x 2436</td> <td>375 x 812</td> <td>3.0</td> <td>3.0</td> </tr> <tr style="vertical-align: middle;"> <td height="50">iPhone 8 Plus</td> <td>1080 x 1920</td> <td>414 x 736</td> <td>2.608</td> <td>3.0</td> </tr> <tr style="vertical-align: middle;"> <td height="50">iPhone 8</td> <td>750 x 1334</td> <td>375 x 667</td> <td>2.0</td> <td>2.0</td> </tr> <tr style="vertical-align: middle;"> <td height="50">iPhone 7 Plus</td> <td>1080 x 1920</td> <td>414 x 736</td> <td>2.608</td> <td>3.0</td> </tr> <tr style="vertical-align: middle;"> <td height="50">iPhone 6s Plus</td> <td>1080 x 1920</td> <td>375 x 667</td> <td>2.608</td> <td>3.0</td> </tr> <tr style="vertical-align: middle;"> <td height="50">iPhone 6 Plus</td> <td>1080 x 1920</td> <td>375 x 667</td> <td>2.608</td> <td>3.0</td> </tr> <tr style="vertical-align: middle;"> <td height="50">iPhone 7</td> <td>750 x 1334</td> <td>375 x 667</td> <td>2.0</td> <td>2.0</td> </tr> <tr style="vertical-align: middle;"> <td height="50">iPhone 6s</td> <td>750 x 1334</td> <td>375 x 667</td> <td>2.0</td> <td>2.0</td> </tr> <tr style="vertical-align: middle;"> <td height="50">iPhone 6</td> <td>750 x 1334</td> <td>375 x 667</td> <td>2.0</td> <td>2.0</td> </tr> <tr style="vertical-align: middle;"> <td height="50">iPhone SE</td> <td>640 x 1136</td> <td>320 x 568</td> <td>2.0</td> <td>2.0</td> </tr> <tr style="vertical-align: middle;"> <td height="50">iPad Pro 12.9-inch (2nd generation)</td> <td>2048 x 2732</td> <td>1024 x 1366</td> <td>2.0</td> <td>2.0</td> </tr> <tr style="vertical-align: middle;"> <td height="50">iPad Pro 10.5-inch</td> <td>2224 x 1668</td> <td>1112 x 834</td> <td>2.0</td> <td>2.0</td> </tr> <tr style="vertical-align: middle;"> <td height="50">iPad Pro (12.9-inch)</td> <td>2048 x 2732</td> <td>1024 x 1366</td> <td>2.0</td> <td>2.0</td> </tr> <tr style="vertical-align: middle;"> <td height="50">iPad Pro (9.7-inch)</td> <td>1536 x 2048</td> <td>768 x 1024</td> <td>2.0</td> <td>2.0</td> </tr> <tr style="vertical-align: middle;"> <td height="50">iPad Air 2</td> <td>1536 x 2048</td> <td>768 x 1024</td> <td>2.0</td> <td>2.0</td> </tr> <tr style="vertical-align: middle;"> <td height="50">iPad Mini 4</td> <td>1536 x 2048</td> <td>768 x 1024</td> <td>2.0</td> <td>2.0</td> </tr> </table> </div> </div> </body> </html>
table, td, th { border: 2px solid #ccc;} .bod{border:1px solid #000;border:collapse;} #table2 { border-collapse: separate; border-color: #000; border-spacing: 4px; } p{display:none;}

Related: See More

Paper Kit
Login screen pure Bootstrap 4.0
Centered Horizontal and Vertical Login Screen
Full screen background cover page.

Questions / Comments: