动态检测屏幕高度和屏幕宽度，以精简图像的高度和宽度

Question

我只能使用下面的代码来标记display，正如corrl在这篇文章的回复中提到的divportrait

<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>

按预期工作

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

我尝试从内部和外部窗口绑定获取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

如这里提到的导入 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| 导入“svelte-viewport-info”；31 | 从“jquery”导入 jQuery；| ^ 32 | 从 'svelte' 导入 { onMount }；33 | 33 从 './assets/image1.png' 导入 image1v；在 TransformContext.error (/home/Documents/sve/svelteDemo/node_modules/vite/) 处的 formatError (/home/Documents/sve/svelteDemo/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36769:46) 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 (node: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/距离/节点/块/dep-f5552faa.js:52060:29)

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

如何使这项工作有效？或者有一个简单的解决方案吗？

Answer 1

正如评论中所建议的，您可以使用内部绑定<svelte:window>来跟踪大小。（请注意，变量只是声明的let innerHeight = 0，它们不需要$:）然后您可以根据结果或基于您所追求的条件的两个值来
声明反应变量（此处为）。要调整图像大小，您可以再次使用类和指令，以便在条件为 时添加类。（请注意，条件类的声明必须位于标记或样式表内的基本类之后，因此值会被覆盖。）$:truefalseclass: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>