移动端限制最大宽度_图片，最大宽度和移动

移动端限制最大宽度

Many web developers prefer to keep as much control over the applications, especially when it comes down to how the application displays on a mobile device. I'll often see developers prevent zooming in mobile browsers, allowing them to manage display size:

许多Web开发人员都希望对应用程序保持尽可能多的控制权，尤其是当涉及到应用程序在移动设备上的显示方式时。 我经常会看到开发人员阻止放大移动浏览器 ，从而允许他们管理显示尺寸：

A useful snippet for any mobile developer. Another useful snippet, this one a small CSS helper, ensures that your images don't exceed the fixed width on mobile devices:

适用于任何移动开发人员的有用代码段。 另一个有用的代码段，这是一个小CSS帮助程序，可确保您的图像不会超出移动设备上的固定宽度：

/* iphone */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	img { max-width: 100%; }
}

/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	img { max-width: 100%; }
}

By setting the max-width property of the image, the image cannot bleed to the right of the page, regardless of its size. You can add that same max-width property to images when it comes time for print too:

通过设置图像的最大宽度属性，无论其大小如何，图像都不会在页面右侧流血。 您也可以在打印时将相同的max-width属性添加到图像：

@media print {
	img { max-width: 100%; }
}

Keep this snippet handy for your current and future mobile web and print endeavors; it's just another CSS directive to show your mobile and print users that you care!

请将此代码段方便地用于您当前和将来的移动网络和打印工作； 这只是另一个CSS指令，向您的移动和打印用户显示您所关心的内容！

翻译自: https://davidwalsh.name/image-max-width

移动端限制最大宽度