CSSによるiPhone/iPadのコンテンツ出し分け

投稿者:
<style>
@media screen and (max-width:400px) {
.foriPhone {
}
.foriPad {
display:none;
}
}
@media screen and (min-width:401px){
.foriPhone {
display:none;
}
.foriPad {
}
}
</style>
</head>
<body>
<div class="foriPhone">
iPhone&#29992;
</div>
<div class="foriPad">
iPad&#29992;
</div>
</body>