HTML中的META标签的"视口"...如果iPad = X且iPhone = Y？

Question

适用于iPad但不适用于iPhone

任何代码都可以指向iPad和iPhone

对于iPad

<meta name="viewport" content="width=1040px, minimum-scale=0.5, maximum-scale=1.0" />

对于iPhone

<meta name="viewport" content="width=440px, minimum-scale=0.5, maximum-scale=1.0" />

Answer 1

iPhone最大宽度为480px而不是440px

<meta name = "viewport" content = "user-scalable=no, width=device-width"/>

<meta name="apple-mobile-web-app-capable" content="yes"/>

这将关闭可缩放选项设置视点

<link media="only screen and (device-width: 768px)" rel="stylesheet" href="css/ipad.css" type="text/css" title="no title"/>

这是仅适用于iPad的css文件

<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="css/small-device.css" type="text/css" title="no title"/>

这是仅适用于iPhone的css文件

它们是条件注释,因此它们仅适用于具有指定最大宽度的特定设备.