Question 276038 in Html Question posted in
Some basic documentation can be found here.

update meta property dynamically from the script tag in html

I am working on one project where i need to use html viewport content property interactive-widget but as that is only available in chrome and Firefox so i need to do something which can append that property only if user agent is not safari so how i can achieve this.

Note:- I am also using webpack.

  plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: 'web/index.html',
            filename: 'index.html',
            splashLogo: fs.readFileSync(path.resolve(__dirname, `../../assets/images/new-ify${mapEnvToLogoSuffix(envFile)}.svg`), 'utf-8'),
            usePolyfillIO: platform === 'web',
            isStaging: envFile === '.env.staging',
        }),

 </style>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
    <script>
        if (window.safari === undefined) {
            var viewport = document.querySelector('meta[name="viewport"]');
            viewport.content += ', interactive-widget';
        }
    </script>
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="shortcut icon" id="favicon" href="/favicon.png">
    <% if (htmlWebpackPlugin.options.usePolyfillIO) { %>
        <!-- polyfill.io is only needed on Web to support older browsers. It should not be loaded for desktop -->
        <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2CResizeObserver&flags=gated"></script>
    <% } %>
    <link rel="manifest" href="/manifest.json" />
</head>

in above code i am checking if window. Safari is undefined then contact he content string but that is not working as expected.

Tags:

2

Answers


  1. 0

    You can use the navigator.userAgent string.

    <script>
    if (!/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
        var viewport = document.querySelector('meta[name="viewport"]');
        viewport.content += ', interactive-widget';
    }
</script>
    Login or Signup to reply.
  2. 0

    To achieve this, you can utilize the userAgent property of the navigator object in JavaScript to discern the type of browser. By implementing this snippet, you can readily detect the user’s browser; if it is not Safari, you will accomplish your desired outcome.

    <meta
  name="viewport"
  content="width=device-width, user-scalable=no, initial- 
scale=1"
/>
<script>
  var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
  if (!isSafari) {
    var viewport = document.querySelector('meta[name="viewport"]');
    if (viewport) {
      viewport.content += ", interactive-widget";
    }
  }
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search