"Two fingers zoom in" on a photo

[Pei_Shao]

Hi,

First, thanks for providing such a wonderful platform for no coders. I spent one month on frontend/backend services research, and finally decided to use Backendless. It was a long story.

I am building an app displaying photos. I was able to setup pages and showing single photo and a collection photos. One feature I am trying to do is “two fingers zoom in” on a photo. I wasn’t able to find any documentation on it. Is there a way to do it? Appreciate your help.

Pei

[Klaas_Klever]

Hi @Pei_Shao ,
I had a discussion about it as well some time ago.

Why user-scalable=no as default?

When I’m publishing my web app, the generated index.html contains <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> user-scalable=no prevents users to zoom into a web page with a two finger pinch zoom gesture. Is there a specific reason why you’ve switched this feature off by default? I can turn it on again, but this forces me to edit the index.html each time I’m releasing. Regards,

It’s for sure worth to ask the Backendless team whether there is some progress with html header metadata.

Regards

[vladimir-upirov]

Hi guys

Yes, we have a ticket in our roadmap to allow configuring the viewport meta tag, but this has low priority right now and in our plans to completely rework the Settings section to be able to configure:

• PWA
• favicon
• meta tags
• extra configs (to use them in Logic)
• etc.

However, there is a workaround for that:

1. create a CustomComponent
2. use it on required pages, it can be converted into a ReusableComponent
3. the component can be without any UI, just for modifying the meta tag
4. in the component code you can programmatically set the required content

document.querySelector('meta[name="viewport"]').content='width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes'

//bundle.js for the component

define(() => {
  return function MetaTagsSetter() {
    
    React.useEffect(()=>{
      const $tag = document.querySelector('meta[name="viewport"]')
      
      $tag.content = (
        'width=device-width, ' +
        'initial-scale=1.0, ' +
        'maximum-scale=3.0, ' +
        'user-scalable=yes'
      )
      
    },[])
    
    return null
  }
});

does it make sense?

Regards, Vlad

[Klaas_Klever]

Hello @vladimir-upirov ,
I’m really looking forward to see PWA features and meta-tag configurations!

W.r.t. your workaround:

• I’m not educated in React-components, so it’s good to see examples. Can you recommend a systematic introduction into this topic?
• I can fill in the bundle.js file according to your description. But where to place the code document.querySelector('meta[name="viewport"]').content='width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes ? Is this custom code for the OnPageEnter event?
• I think, dynamic meta-tag generation will work for the user-scalable property. In general we are really waiting for a static definition of meta tags, so that tools like google or WhatsApp can discover these tags.

Thanks

[vladimir-upirov]

have you tried to create a CustomComponent in the Components section?

I’ve already provided content for the component code:

@vladimir-upirov

//bundle.js for the component
…

[vladimir-upirov]

@Klaas_Klever

I’m not educated in React-components, so it’s good to see examples. Can you recommend a systematic introduction into this topic?

I would start from their web site https://reactjs.org/ , but pay attention that custom components do not support JSX syntax, also there is a couple of samples when you create a new custom component

@Klaas_Klever

• I think, dynamic meta-tag generation will work for the user-scalable property. In general we are really waiting for a static definition of meta tags, so that tools like google or WhatsApp can discover these tags.

completely agree with you

[Klaas_Klever]

Hi @vladimir-upirov ,
You wrote:

@vladimir-upirov

have you tried to create a CustomComponent in the Components section?

Yes, I did. I’ve cretated the custom component and copied your bundle.js code. However, you wrote in your first repsonse:

4. in the component code you can programmatically set the required content

and then you referred to the following piece of code:

document.querySelector('meta[name="viewport"]').content='width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes'

What/Where is the “component code”. Should this piece of code be part of bundle.js? Where to place it?

Regards,

[vladimir-upirov]

I see,

no, I shared a specific line of code to modify the meta tag, and then shared how it will look like in the custom component

[vladimir-upirov]

could you please share how your bundle.js of the custom component looks like?

[Klaas_Klever]

It looks exactly as you described it here. I placed the custom component on a page and the new meta-tag can be seen. All good! I just wasn’t sure about this specific line of code …
Thanks

[vladimir-upirov]

Oh, I thought it doesn’t work for you.

So, if everything is alright it’s good

I assume we will do restyling the Settings section very soon and it gives us more flexibility