动态检测屏幕高度和屏幕宽度以改变svelte中图像的高度和宽度

Question

我只能在portrait 中使用corrl 在this 发布响应中提到的以下代码在display 中添加div 标记

<script context="module">
    import Viewport from 'svelte-viewport-info'
</script>

<div class="only-portrait">
    only visible in Portrait Mode
</div>

<style>
    :global(.Landscape .only-portrait) {
        display: none;
    }
    :global(.Portrait .only-portrait) {
        display: block;
        background: black;
        color: white;
        padding: 2rem;
    }
</style>

按预期工作

但是当更具体的视口尺寸为height.viewport <= 133% of width.viewport时，在portrait模式下需要减小图像元素尺寸之一（高度和宽度）

我尝试使用来自Inner and Outer window bindings 的代码获取viewport height 和width

<script>
    $: outerWidth = 0
    $: outerHeight = 0
</script>

<svelte:window bind:innerWidth bind:outerWidth bind:innerHeight bind:outerHeight />

尝试使用jquery根据条件viewport.width*1.33 <= viewport.height改变图像的宽度和高度

如here提到的导入jquery

<script lang="ts">
  import jQuery from 'jquery';
  import { onMount } from 'svelte';
  onMount(() => {
    window.jQuery = jQuery;
    
  jQuery(window).resize(function(event){
  console.log(outerWidth*1.33,' ',outerHeight);
  if(outerWidth*1.33 <= outerHeight) {
   jQuery(".imageclass").each(function() {
  jQuery(this).attr("width", "78vw");  jQuery(this).attr("height", "78vw/2.81vh");
  });} 

  });

});
</script>
<svelte:window  bind:outerWidth bind:outerHeight />

我收到了这个错误

文件：/home/Documents/sve/svelteDemo/src/App.svelte 29 | 从'svelte-meta-tags'导入{ MetaTags }； 30 |进口 '苗条的视口信息'; 31 |从'jquery'导入jQuery； | ^ 32 |从'svelte'导入{ onMount}； 33 |从'./assets/image1.png'导入image1v； 在 formatError (/home/Documents/sve/svelteDemo/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36769:46) 在 TransformContext.error (/home/Documents/sve/svelteDemo/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36765:19) 在 normalizeUrl (/home/Documents/sve/svelteDemo/node_modules/vite/dist/node/chunks/dep-f5552faa.js:73703:26) 在 processTicksAndRejections (节点:internal/process/task_queues:96:5) 在异步 TransformContext.transform (/home/Documents/sve/svelteDemo/node_modules/vite/dist/node/chunks/dep-f5552faa.js:73843:57) 在异步 Object.transform (/home/Documents/sve/svelteDemo/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36985:30) 在异步 doTransform (/home/Documents/sve/svelteDemo/node_modules/vite/dist/node/chunks/dep-f5552faa.js:52060:29)

似乎不明白这里出了什么问题！

如何做到这一点？还是有一个简单的解决方案？

Answer 1

根据 cmets 中的建议，您可以使用 <svelte:window> 中的绑定来跟踪大小。 （注意变量只是声明let innerHeight = 0，它们不需要$:）
然后，您可以根据您所追求的条件，根据导致true 或false 的两个值声明一个反应变量（此处为$:）。 为了调整图像大小，您可以再次使用类和class: directive，因此如果条件为true，则添加类。 （请注意，条件类的声明必须在<style> 标记或样式表内的基本类之后，因此值会被覆盖。）

这是REPL

<script>
    let innerWidth = 0
    let innerHeight = 0
    
    $: condition = innerWidth*1.33 <= innerHeight
</script>

<svelte:window bind:innerWidth bind:innerHeight />

<p> Inner Width: {innerWidth} </p>
<p> Inner Height: {innerHeight} </p>
<p> condition: {condition} </p>

<img src="https://svelte.dev/svelte-logo-horizontal.svg" alt=""
         class="image-basic"
         class:image-conditional={condition}
         />

<style>
    .image-basic {
        width: 100vw;
    }
    .image-conditional {
        width: 50vw;
    }

</style>