Web�y�[�W��Retina�Ή�������e�N�j�b�N�`��b�m�����FjQuery�~HTML5�~CSS3��^�ʖڂɕ׋��i4�j�i2/2 �y�[�W�j

» 2013�N08��29�� 17��00�� ���J
[�R�c�@�����C�N���X���\�b�h]
�O�̃y�[�W�� 1|2 �@�@�@�@�@�@

���f�B�A�N�G���\�����׃f�B�X�v���C�ɑΉ�������ɂ�

-webkit-device-pixel-ratio�ɂ‚���

�@��̃f�o�C�X�s�N�Z����idevice pixel ratio�j�̍��ڂł�������܂������A�����׃f�B�X�v���C������CSS�őΉ�����ɂ̓��f�B�A�N�G���iMedia Queries�j���g���킯�ł����A���̍ۂ̏������ɗp������̂��A�u-webkit-device-pixel-ratio�v�Ƃ������̂ł��BRetina�f�B�X�v���C���ڂ�iOS�[�����Ɏ���Ă݂܂��傤�B

�@Retina�f�B�X�v���C�̃f�o�C�X�s�N�Z����́u2�v�ł��B�‚܂�A�f�o�C�X�̃s�N�Z�����x�̍Œ�l��2�̏ꍇ�̂݃X�^�C����K�p����Ƃ������f�B�A�N�G�����w�肷��Ηǂ��킯�ł��B

@media (-webkit-min-device-pixel-ratio: 2) {
    .class {
        background-image: url(image-2x.png);
    }
}

�@�ƁA�����܂ʼn�����Ă����ĉ��ł����A����-webkit-device-pixel-ratio�͂��Ƃ��ƁA�A�b�v����Retina�f�B�X�v���C���J�������ۂɁAWebKit��Ǝ��Ɋg���������̂ł�����W3C�̕W���K�i�ł͂���܂���B��ɓ���WebKit�G���W���𓋍ڂ��Ă���Android��Chrome������ɒǏ]���A���݂ł�Firefox�Ȃ�т�Opera������ɑΉ����Ă��܂����A�ȉ��̂悤�Ƀx���_�v���t�B�b�N�X���K�v�ł�������l�̎w����@���قȂ�ȂǁA���܂�g�����肪�ǂ��Ƃ͂����Ȃ��̂�����ł��B

@media (-webkit-min-device-pixel-ratio: 2),
       (min--moz-device-pixel-ratio: 2),
       (-o-min-device-pixel-ratio: 2/1) {
    .class {
        background-image: url(image-2x.png);
    }
}

resolution

�@resolution���܂��s�N�Z�����x��\�����̂ł����A�������-webkit-device-pixel-ratio�ƈ����W3C�Œ�߂�ꂽ�W���K�i�ł��B�l�̎w���dpi�Adpcm�Adppx��3��ނ�����A���ꂼ��ȉ��̂悤�ȓ����������Ă��܂��B

  • dpi
    • 1�C���`������̃h�b�g����\���܂��B��ʂł悭�g����̂�72�܂���96dpi�ł��B�������dpi�͒ʏ킱����傫���Ȃ�܂��B1�C���`��2.54cm�Ȃ̂ŁA1dpi��2.54dpcm�ł��B
  • dpcm
    • 1�Z���`���[�g��������̃h�b�g����\���܂��B1�C���`��2.54cm�Ȃ̂ŁA1dpcm��0.39dpi�ł��B
  • dppx
    • �s�N�Z���ipx�j������̃h�b�g����\���܂��BCSS��inch��CSS��px�̔䗦��1.96�ŌŒ�Ȃ̂ŁA1dppx��96dpi�Ɠ����ł��B�����image-resolution�Œ�`�����ACSS�̉摜�̃f�t�H���g�̉𑜓x�Ɉ�v���܂��B

�@��vWeb�u���E�U�̑Ή��󋵂͈ȉ��̂Ƃ���ł��B

�@�\ Chrome Firefox Internet Explorer Opera Safari�iWebKit�j Android iOS
resolution 3.5�` 9�` 9�`
dpi 3.5�` 9�` 9�`
dpcm 3.5�` 9�`
dppx 16.0�` 12.10�`
�����͑Ή��”\�ȃo�[�W�����ԍ�

�@WebKit�n�����Ƃ��Ƃ����Ή��ł����A��������device-pixel-ratio�Ŏw�肵�Ă����āA����ȊO��resolution��dppx�Ŏw�肷��΁A�ЂƂ܂�IE�ȊO���T�|�[�g���邱�Ƃ��ł��܂��Bdpi�Ȃ�IE�ł��g�����Ƃ��ł��܂����Adevice-pixel-ratio�̎d�l�ƕ����Ďw�肷�邱�Ƃ��l�����dppx�̕����]�v�ɓ����g��Ȃ��čς݂����ł��B

�@�R�[�h�ɂ���Ƃ��̂悤�Ȋ����ł��B

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx) {
    .class {
        background-image: url(image-2x.png);
    }
}

�@���ƃX�b�L���Ƃ����R�[�h�ɂȂ�܂����B���̏�������W3C���������Ă�����̂ŁA���������l���Ă�����͂�����̏������œ��ꂷ��̂��ǂ��ł��傤�B

������

�@���̕ӂ�͂܂���r�I�d�l���V�����A�e�x���_�̎����󋵂��܂��܂��ł���̂������Ă��A�Ȃ��Ȃ��������ꂽ�������t����̂���������肵�܂��B���������M�҂��A���̋L�������M����ɓ������Ē��ׂĂ��������ɁA�ǂꂪ�����łǂꂪ�Â��Ďg���Ȃ����Ȃ̂��A��������̂ɋ�J���܂����B

�@PC�̐��E�ł́AMacBook Pro��Windows�m�[�gPC�̈ꕔ�ȂǁA�����׃f�B�X�v���C�𓋍ڂ����‹��͔��Ɍ����Ă��܂����A���o�C���[���ł͂��͂⍂���׃f�B�X�v���C��������O�ɂȂ��Ă��܂��B���X�|���V�uWeb���������̂ł���΁A�������������o�C���[�������ڂ��Ă��鍂���׃f�B�X�v���C�ւ̑Ή��𖳎����邱�Ƃ͂ł��܂���B

�@�l�I�Ȉӌ��ł����AWeb�T�C�g�͕\���������ăi���{���Ǝv���܂��B�����׃f�B�X�v���C�ւ̑Ή��́A�摜�֘A�����ꂢ�ɕ\��������̂���ɂȂ�܂����A�S�‹������̉𑜓x�𐶐^�ʖڂɗp�ӂ���ƁA���R�\���p�t�H�[�}���X�ɂ����e�����y�ڂ��܂��B�����炫�ꂢ�ɕ\���ł��Ă���Web�y�[�W�ł��A���̕\���Ɏ��Ԃ�������悤�ł͎c�O�łȂ�܂���B

�@����́A���̕ӂ����肭�������邽�߂̃m�E�n�E�������‚��Љ�����Ǝv���܂��B

�Q�l�T�C�g

���҃v���t�B�[��

�R�c�����i��܂� �Ȃ����j

�N���X���\�b�h�ł͂��炭�t�����g�G���h�E�G���W�j�A�BJavaScript�EHTML�ECSS�ɂ��J������Ȑ��ƂƂ������A�X�^�C���b�V�����ƒN�[���ȃf�U�C���������������Ă��邱�Ƃ���AUI�f�U�C����S�����邱�Ƃ����΂��΁B���̓v���O���������m�������삷��̂���ԓ��ӂ������肷��B

�N���X���\�b�h �J���u���O�R�c����


�O�̃y�[�W�� 1|2 �@�@�@�@�@�@

Copyright © ITmedia, Inc. All Rights Reserved.

'; if( !this.isSubscription ) { this.insertTarget = document.querySelector('#cmsBody .subscription') || document.querySelector('#cmsBody .inner'); } }; BodyAdIMSWithCCE.prototype = Object.create(BodyAdContent.prototype); BodyAdIMSWithCCE.prototype.activate = function () { refreshGam('InArtSpecialLink'); } // global reference window.itm = itm; //entry point BodyAdEventBase.polyfill(); const bodyAdManager = BodyAdManager.getInstance(); bodyAdManager.addEventListener(BodyAdManager.EVENTS.READY, function (ev) { bodyAdManager.loadAdvertise(); }); bodyAdManager.init(); })();
�X�|���T�[����̂��m�点PR

���ڂ̃e�[�}

Microsoft  WindowsőO2025
AI for GWjAO
[R[h^m[R[h Zg by IT - ITGWjArWlX̒SŊ􂷂gD
Cloud Native Central by IT - XP[uȔ\͂gD
�V�X�e���J���m�E�n�E �y�����i�r�zPR
���Ȃ��ɂ������߂̋L��PR

RSS�ɂ‚���

�A�C�e�B���f�B�AID�ɂ‚���

���[���}�K�W���o�^

��IT�̃��[���}�K�W���́A �������A���ׂĖ����ł��B���Ѓ��[���}�K�W�������w�ǂ��������B