Question

不久前建立了一个Shopify登陆页面，在桌面上看起来不错，但是，当在移动设备上查看时，一切看起来都放大了。我知道这很可能是由于该页面是从头开始构建的使用Shopify的代码编辑器（因此所有内容都是带有内联CSS的HTML），但我一直在努力寻找如何针对移动设备对其进行优化的方法。下面是整个着陆页的代码。

<meta charset="utf-8" />
<div class="container" style="display: grid; grid-template-columns: repeat(12, 1fr);">
  <div class="content" style="grid-column: span 5; padding-top: 50px;">
    <p style="font-size: 50px; font-family: 'Ubuntu', sans-serif;"><strong>E&amp;C's Brand Ambassador Program</strong></p>
    <p style="font-size: 40px;"><span>Do you enjoy sharing how much you love your Heavenly Hunks?</span></p>
    <p style="font-size: 23px;"><span>If so, things are getting pretty serious between us and we'd like to take the next step. We typically don't like labels but hunk ambassador has a nice ring, don't you think?</span></p>
    <p style="font-size: 23px;"><span>Enjoy exclusive perks such as:</span></p>
    <ul>
      <li style="font-size: 23px;"><strong>Free Product</strong>: We will satisfy your Heavenly Hunks cravings.</li>
    </ul>
    <ul>
      <li style="font-size: 23px;"><strong>Insider information</strong>: Provide input and taste test new flavors.  Be in the know about new releases and seasonal products</li>
    </ul>
    <ul>
      <li style="font-size: 23px;"><strong>Discount codes  and perks for your network: </strong>We will create special promo codes for your friends, family and followers offering a discount when they buy from us online. <br /><br /></li>
      <li style="font-size: 23px;"><strong>Bragging rights: </strong>Association with a fast growing brand, with a positive story and message!</li>
    </ul>
  </div>
  <div class="form" style="grid-column: span 7; padding-left: 20px; transformx: scale(0.6);"><iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd7ZZat96_IBMo8eiOrCWFvS0jkZdQKXJXBY1EucosaQ7ZOcQ/viewform?embedded=true" width="640" height="1620" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe></div>
</div>
<img src="https://user-assets-unbounce-com.s3.amazonaws.com/7f3b837c-ab0b-44ad-9174-023129a4e0b5/4de43676-3a0a-485c-a45d-d87af9c7ed96/screen-shot-2018-10-08-at-1-45-11-pm.original.png" width="100%" />

感谢您的帮助。

Answer 1

您没有任何媒体查询吗？我会有一个单独的CSS文件，您还可以在其中添加媒体查询，例如：

@media (max-width: 780px) {
 //Code, that will take place if screen is little
}

此外，您可以添加

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

此外，如果这是完整代码，那么html头和身标记在哪里？

Shopify页面在移动设备上的显示方式与在桌面设备上的显示方式不同

1 个答案: