iPhone 6 / iPhone 6 Plus の画面サイズについて調べてみた。

iphone6

はじめまして、中村です。

先日iPhone6, iPhone6 Plusが発表されましたね。

サイズが大きくなり、
レスポンシブ対応時の、
ブレイクポイントも考えなおさないといけないかもしれませんね。

ということで、
Xcode 6 GM seedに入っている
iOS Simulatorで各種サイズを取得してみました。

左から
・iPhone 6 Plus
・iPhone 6
・iPhone 5s
・iPhone 4s

iOS-Simulator

はい、見にくいですね。
表にまとめました。

iPhone 6 Plus iPhone 6 iPhone 5s iPhone 4s
screen.width 414 375 320 320
screen.height 736 667 568 480
innerWidth 980 980 980 980
innerHeight 1487 1461 1409 1139
devicePixelRatio 3 2 2 2

同じ、Retina HDディスプレイでも、
iPhone 6 と iPhone 6 Plus とでは解像度が格段に違いますね。

ソースはこんな感じです。
無駄にangularjsで作ってみました。

<!DOCTYPE html>
<html lang="ja" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>devicePixelRatio</title>
</head>
<body ng-controller="indexCtrl">
    <style type="text/css">
        table {
            margin: 50px auto;
            border-collapse: collapse;
            border-spacing: 0;
        }
        tr:nth-child(odd) {
            background: #EEE;
        }
        td {
            padding: 10px;
            border : 1px solid #000;
            font-size: 60px;
        }
    </style>
    <table>
        <tr ng-repeat="size in sizeList">
            <td>{{size.name}}</td>
            <td>{{size.value}}</td>
        </tr>
    </table>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
    <script type="text/javascript">
    (function (window, angular, undefined) {'use strict';
        angular.module('myApp', [])
        .controller('indexCtrl', ['$scope', function($scope) {
            $scope.sizeList = [
                {name : "window.screen.width",     value : window.screen.width},
                {name : "window.screen.height",    value : window.screen.height},
                {name : "window.innerWidth",       value : window.innerWidth},
                {name : "window.innerHeight",      value : window.innerHeight},
                {name : "window.devicePixelRatio", value : window.devicePixelRatio}
            ]
        }]);
    })(window, window.angular);
    </script>
</body>
</html>

ご参考になれば幸いです。
では!

コメントを残す

メールアドレスが公開されることはありません。