如何在移动设备上全宽显示嵌入，但在桌面上显示60%宽度

在移动设备上全宽显示嵌入，但在桌面上显示60%宽度，可以通过使用响应式设计和媒体查询来实现。

响应式设计是一种能够根据设备屏幕大小和分辨率自动调整布局和样式的设计方法。通过使用CSS媒体查询，可以根据设备的特性来应用不同的样式规则。

以下是一种实现的方法：

1. 在HTML中，使用meta标签设置viewport，以确保移动设备正确显示页面：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

1. 在CSS中，使用媒体查询来设置不同设备上的样式。首先，设置全宽显示的样式：

.embed {
  width: 100%;
}

1. 接下来，使用媒体查询来设置桌面上显示60%宽度的样式。假设我们认为桌面设备的最小宽度为768px：

@media (min-width: 768px) {
  .embed {
    width: 60%;
  }
}

在上述代码中，当设备宽度大于等于768px时，.embed元素的宽度将被设置为60%。

1. 在HTML中，将需要全宽显示嵌入的元素添加一个类名（例如.embed）：

<div class="embed">
  <!-- 嵌入内容 -->
</div>

这样，在移动设备上，嵌入内容将全宽显示，而在桌面设备上，嵌入内容将显示为60%宽度。

推荐的腾讯云相关产品：腾讯云移动应用托管（Mobile Application Hosting），该产品提供了一站式的移动应用托管服务，支持移动应用的部署、扩展和管理。详情请参考腾讯云移动应用托管产品介绍：https://cloud.tencent.com/product/mah