meta tag safari

Safari HTML Reference

• Table of Contents
• Jump To…
• Download Sample Code

Supported Meta Tags

Apple-specific meta tags are described here.

Apple-Specific Meta Tag Keys

Apple-mobile-web-app-capable.

Sets whether a web application runs in full-screen mode.

If content is set to yes , the web application runs in full-screen mode; otherwise, it does not. The default behavior is to use Safari to display web content.

You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.

Available for iOS.

Apple extension.

apple-mobile-web-app-status-bar-style

Sets the style of the status bar for a web application.

This meta tag has no effect unless you first specify full-screen mode as described in apple- apple-mobile-web-app-capable .

If content is set to default , the status bar appears normal. If set to black , the status bar has a black background. If set to black-translucent , the status bar is black and translucent. If set to default or black , the web content is displayed below the status bar. If set to black-translucent , the web content is displayed on the entire screen, partially obscured by the status bar. The default value is default .

format-detection

Enables or disables automatic detection of possible phone numbers in a webpage in Safari on iOS.

By default, Safari on iOS detects any string formatted like a phone number and makes it a link that calls the number. Specifying telephone=no disables this feature.

Changes the logical window size used when displaying a page on iOS.

Use the viewport meta key to improve the presentation of your web content on iOS. Typically, you use the viewport meta tag to set the width and initial scale of the viewport.

For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing a Safari on iOS-specific web application, you should set the width to the width of the device.

Table 1 describes the properties supported by the viewport meta key and their default values. When providing multiple properties for the viewport meta key, you should use a comma-delimited list of assignment statements. Follow these rules when setting multiple properties:

Do not use a semicolon as a delimiter.

A space may work as a delimiter, but a comma is preferred.

For numeric properties, if the value contains a nonnumeric character but starts with a number, then the number prefix is used as the value. For example, 1.0x is equivalent to 1.0 and 123x456 is equivalent to 123 . If the parameter doesn’t begin with a number, the value is 0 .

When referring to the dimensions of a device, you should use the constants described in Table 2 instead of hard-coding specific numeric values. For example, use device-width instead of 320 for the width, and device-height instead of 480 for the height in portrait orientation.

You do not need to set every viewport property. If only a subset of the properties are set, then Safari on iOS infers the other values. For example, if you set the scale to 1.0 , Safari assumes the width is device-width in portrait and device-height in landscape orientation. Therefore, if you want the width to be 980 pixels and the initial scale to be 1.0 , then set both of these properties.

For example, to set the viewport width to the width of the device, add this to your HTML file:

To set the initial scale to 1.0 , add this to your HTML file:

To set the initial scale and to turn off user scaling, add this to your HTML file:

Use the Safari on iOS console to help debug your webpages as described in the Safari Web Inspector Guide . The console contains tips to help you choose viewport values—for example, it reminds you to use the constants when referring to the device width and height.

Copyright © 2014 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2014-07-15

Sending feedback…

We’re sorry, an error has occurred..

Please try submitting your feedback later.

Thank you for providing feedback!

Your input helps improve our developer documentation.

How helpful is this document?

How can we improve this document.

* Required information

To submit a product bug or enhancement request, please visit the Bug Reporter page.

Please read Apple's Unsolicited Idea Submission Policy before you send us your feedback.

Amit Merchant Verified ($10/year for the domain)

A blog on PHP, JavaScript, and more

Get your website ready for new tab bar theming of Safari 15

June 13, 2021 · Safari

It’s a wrap for Apple’s WWDC 2021 last week. And while a lot of good stuff was released in the event, I, as a web developer, was pretty excited for Safari 15 and its all-new design in the macOS and the iPadOS.

The theme-color meta tag

Tab bar theming based on device theme.

The part of this all-new design is the adaptive theming of the tab bar. So, if your website’s background is pink , the tab bar color will also be pink . This makes the website blend in really nicely with the entire browser window. That’s pretty nice in my opinion and adds aesthetics to the overall web browsing experience.

While Safari 15 can change the tab bar color intelligently, you, as a website owner, can also change this behavior as per your need by adding just a single line in your HTML.

So, the way how this works is, you need to add the theme-color meta tag in your HTML and set your desired color in it. This will tell Safari to set this color for the website when it’s opened in a tab.

For instance, as you can tell, my blog has got a purple-ish accent to it. It only makes sense to have a tab bar color that falls into the same color region. So, we can add the following meta tag to the HTML with the color #673AAC like so.

This is all you need to make Safari 15 aware of the color in which the tab bar needs to be rendered when it’s opened in a tab.

Here’s how a website (not my blog) with a theme-color meta tag would look like when it’s opened in Safari 15.

Here’s one more example.

Additionally, you can also set different tab colors based on the device theme, whether it’s a dark or light theme by specifying the media attribute in the meta tag like so.

As you can tell, the media attribute takes prefers-color-scheme into the consideration and will set the tab bar color accordingly.

This is how the end result would look like.

» Share: Twitter , Facebook , Hacker News

Like this article? Consider leaving a

👋 Hi there! I'm Amit . I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.

More on similar topics

Dock installable web apps in Safari macOS Sonoma

Designing websites keeping floating tab bar of Safari 15 (on iOS) in mind

Awesome Sponsors

Download my eBook

Recommendation(s)

Get the latest articles delivered right to your inbox!

No spam guaranteed.

Follow me everywhere

More in "Safari"

Recently published.

Property hooks are coming in PHP 8.4 NEW

A free alternative to GitHub Copilot

Talk to websites and PDFs with this free Chrome Extension

RunJS — A JavaScript Playground on your desktop

The fluent data helper in Laravel

Top Categories

New WebKit Features in Safari 15

Oct 26, 2021

by Jen Simmons

With the release of Safari 15 for macOS Monterey, iPadOS 15, iOS 15, and watchOS, as well as macOS Big Sur and macOS Catalina, WebKit brings significant advancements in privacy and security, improved interoperability, and a host of new features for web developers. Take a look.

Web Extensions

This release brings Safari Web Extensions to iOS and iPadOS. Web Extensions use HTML, CSS, and JavaScript to offer powerful browser customizations. Now developers can create them for every device that supports Safari, using APIs, functionality, and permissions that are increasingly standardized across all browsers. Learn how to build Safari Web Extensions and discover how to convert an existing extension by watching Meet Safari Web Extensions on iOS at WWDC21.

This year’s release also adds support for the Declarative Net Request WebExtensions API to block content on the web. Learn all about the latest WebExtension APIs by watching Explore Safari Web Extension Improvements at WWDC21.

WebKit now provides support for theme-color in HTML meta tags, and in Web Manifest. By specifying a theme-color, web developers can change the color of the status bar and overscroll area in Safari on iOS 15. Theme-color also changes the Tab Bar and overscroll area background colors in Compact Tab layout for Safari 15 on macOS Monterey and Big Sur and iPadOS 15.

In the HTML meta tag, developers can specify separate colors for Dark Mode and light appearance with the media attribute.

Watch “Design for Safari 15” at WWDC21 to learn more about the Compact Tab bar and how to use theme-color.

WebKit now supports CSS aspect-ratio . This property can be used to set a preferred aspect ratio on any element, including boxes like divs , iframes for embedded video, or graphic design elements on a page.

WebKit provides support for the new lab() , lch() , hwb() color syntaxes from Color level 4 , providing web developers with ways to express a richer range of colors in Lab, Lch, and Hue-Whiteness-Blackness. WebKit also supports predefined color spaces using the color() function syntax: srgb , display-p3 , a98-rgb , prophoto-rgb , rec2020 , xyz .

WebKit supports 12 new values for list-style-type : disclosure-closed , disclosure-open , ethiopic-numeric , japanese-formal , japanese-informal , korean-hangul-formal , korean-hanja-formal , korean-hanja-informal , simp-chinese-formal , simp-chinese-informal , trad-chinese-formal , and trad-chinese-informal .

There’s also improved implementation of existing values for list-style-type : armenian , cjk-ideographic , hebrew , lower-armenian , lower-roman , upper-armenian , and upper-roman . See a demo of all of these options at MDN. We also updated WebKit’s implementation of list-style-position:inside to match the updated CSS specification , creating interoperability after a 22 year old debate .

Watch “Design for Safari 15” at WWDC21 to learn more about the latest updates to CSS.

Web Inspector

Web Inspector in Safari 15 includes a CSS Grid Inspector overlay for inspecting grid containers on your pages. Watch “Discover Web Inspector Improvements” at WWDC21 to learn more.

JavaScript and WebAssembly

This release of WebKit adds support for ES6 Modules in Workers and ServiceWorkers. ES6 Modules provides a powerful way for developers to organize large applications using purpose-specific libraries. Workers/Service Workers provides a way to offload work from the main thread, and are often used for complex applications. Now, developers can use them together — moving work off the main thread, improving performance, while retaining the organizational benefits of modules.

Additional new capabilities to the JavaScript engine, include:

• support for top-level await
• Error.cause
• private class methods and accessors
• BigInt64Array and BigUint64Array

Improvements to WebAssembly include streaming compilation, bulk memory operations, reference types, and non-trapping conversions from float to int .

You can learn more about the latest JavaScript and WebAssembly updates to WebKit and Safari 15 by watching “Develop Advanced Web Content” at WWDC21.

WebKit now supports WebGL2 ( demos ). In addition, the WebGL implementation now runs on top of Metal for better performance.

Web Share level 2 enhancements to Web Share enable sharing files from a web page to an app. See Web Share API for more information.

User gestures now propagate through requestAnimationFrame with a one-second time limit.

And now, with Safari 15.1, performance.timeOrigin is available in Web Workers.

You can learn more about the latest Web APIs in WebKit by watching “Develop Advanced Web Content” at WWDC21.

Safari 15 includes several media improvements for users and developers. For example, built-in media controls now have Playback Speed and Chapters menus. Plus, the language/subtitle tracks menu is now available on iOS and iPadOS.

There’s also new support for the Opus audio codec in WebM containers. And on on all iPads that support iPadOS 15, VP9 and WebM in Media Source Extensions (MSE) are now hardware-accelerated.

Safari 15 also adds support for the MediaSession API to enable SharePlay experiences. You can learn more about creating SharePlay experiences by watching “Coordinate media playback in Safari with Group Activities” at WWDC21.

Security and Privacy

Continuing our dedication to privacy and security, Safari on iOS 15 and macOS Monterey supports automatic HTTPS upgrades and hides your IP address from known trackers. Automatic HTTPS upgrades are also supported in Safari 15 on older macOS versions.

Earlier this year, Safari was the first browser to ship a proposed web standard for measuring advertising in a privacy-preserving way – Private Click Measurement , or PCM. Safari 15 provides three major updates to PCM:

• Attribution reports also sent to click destination.
• Click fraud prevention with unlinkable tokens.
• IP address protection for attribution reports.

To learn more, read PCM: Click Fraud Prevention and Attribution Sent to Advertiser or watch “Meet privacy-preserving ad attribution” at WWDC21.

Authentication and Passwords

WebKit now includes support for on-device verification codes in your app or website for a more secure sign-in experience with iCloud Keychain Password Manager. To use verification codes with Safari and Autofill:

• Use autocomplete=one-time-code to make an <input> eligible for AutoFill.
• Use a standard otpauth URL and replace the scheme with apple-otpauth to link directly to the password manager for setup.
• Use a raster image to enable contextual menus on otpauth QR codes that offer to set up a verification code generator.

Learn how to support the process in your apps and websites by watching “Secure login with iCloud Keychain verification codes” at WWDC21.

Despite their prevalence, passwords inherently come with challenges that make them poorly suited to securing someone’s online accounts. Passkeys are WebAuth credentials intended to replace passwords for websites and apps with device sync and backup. The technology is now available in WebKit as a preview. To enable in Safari, choose Develop > Enable Syncing Platform Authenticator. Learn more watching “Move beyond passwords” at WWDC21.

Apple Pay enhancements allow developers using the Payment Request API to indicate an estimated arrival date for shipping methods, support a coupon code, and mark the shipping method as in-store pickup.

Availability

These improvements are available to users running Safari on iPadOS 15, iOS 15, or Safari 15 on macOS Monterey, macOS Big Sur, or macOS Catalina. These features were also available to web developers in Safari Technology Preview releases. Changes in this release of Safari were included in the following Safari Technology Preview releases: 123 , 124 , 125 , 126 , 127 , 128 , 129 .

Download the latest Safari Technology Preview release to stay at the forefront of future web platform and Web Inspector features. You can also use the WebKit Feature Status page to watch for changes to web platform features you’re interested in.

If you run into any issues, we welcome your bug reports for Safari or WebKit bugs for web content issues. Send us a tweet @webkit to share your thoughts on this release.

Quick Guide to Mobile Devices Meta Tags

More and more people around the world use their smartphones to surf online. The numbers of "phone" users increase rapidly over the last couples of years and will keep increasing drastically. This is why it is important to make your website compatible to these mobiles devices.

Coding HTML and CSS changed significantly with mobiles devices. New tags can be used to automatically to display a more friendly version of a website without changing practically any code. These mobile meta tags can be used to easily detect the mobile browser and render an optimized content page to the user or consumer.

Meta elements are the HTML or XHTML <meta ... > element used to provide structured meta-data about a Web page. Multiple elements are often used on the same page: the element is the same, but its attributes are different. Meta elements can be used to specify page description, keywords and any other meta-data not provided through the other head elements and attributes.

source: http://en.wikipedia.org/wiki/Meta_element

The Viewport META Tag

The viewport meta tag is the most common tag used in displaying mobile optimize contents. This meta tag gives a more flexibility on the users' browser by automatically detecting the device width and also give the ability to the user to zoom on a page or not.

Properties of viewport meta tag:

For example:

Custom Android properties

Android devices has special properties added to the meta tag. For example: target-densitydpi. This property allows developers to specify which screen resolution the page has been developed for.

Read more at: http://developer.android.com/guide/webapps/targeting.html

Because viewport is relatively new, some old phones does not support it. In this case, other meta tags can be used to display properly HTML content.

The HandheldFriendly Meta Tag

The HandheldFriendly meta tag was supported in Palm devices (AvantGo browsers) to identify mobile optimized content page. The value of the META tag is "true" for mobile content and "false" for desktop content.

The MobileOptimized Meta tag

The Internet Explorer Mobile default layout fits the page content to the Windows Mobile device screen. The Internet Explorer Mobile default fit-to-screen layout can be changed. Windows Mobile Standard has a Layout menu that enables users to select the Internet Explorer Mobile layout they want.

source: http://msdn.microsoft.com/en-us/library/bb431690.aspx

Apple Specific Meta Tag

Apple created custom meta tags specific for their Safari browsers.

apple-mobile-web-app-capable

This meta tag specify a web application runs in full-screen mode (iOS 2.1 and later).

apple-mobile-web-app-status-bar-style

This meta tag can set a customized style of status bar for a web application (iOS 2.1 and later).

format-detection

This meta tag enable or disable automatic detection of possible phone numbers in a webpage in Safari on iOS (iOS 1.0 and later).

source: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

• Skip to main content
• Select language
• Skip to search

Using the viewport meta tag to control layout on mobile browsers

Mobile browsers render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page.

Mobile Safari introduced the "viewport meta tag" to let web developers control the viewport's size and scale. Many other mobile browsers now support this tag, although it is not part of any web standard. Apple's documentation does a good job explaining how web developers can use this tag, but we had to do some detective work to figure out exactly how to implement it in Fennec. For example, Safari's documentation says the content is a "comma-delimited list," but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators.

Learn more about viewports in different mobile browsers in A Tale of Two Viewports at quirksmode.org.

Viewport basics

A typical mobile-optimized site contains something like the following:

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width  which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale , minimum-scale , and user-scalable properties control how users are allowed to zoom the page in or out.

A pixel is not a pixel

In recent years, screen resolutions have risen to the size that individual pixels are hard to distinguish with the human eye. For example, recent smartphones generally have a 5-inch screens with resolutions upwards of 1920—1080 pixels (~400 dpi). Because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each CSS "pixel". Initially this caused usability and readability problems on many touch-optimized web sites. Peter-Paul Koch wrote about this problem in A pixel is not a pixel .

On high dpi screens, pages with initial-scale=1 will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties. This is consistent with the CSS 2.1 specification , which says:

If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.

For web developers, this means that the size of a page is much smaller than the actual pixel count and browsers may size their layouts and images accordingly. But remember that not all mobile devices are the same width; you should make sure that your pages work well in a large variation of screen sizes and orientations.

The default pixel ratio depends on the display density. On a display with density less than 200dpi, the ratio is 1.0. On displays with density between 200 and 300dpi, the ratio is 1.5. For displays with density over 300dpi, the ratio is the integer floor( density /150dpi). Note that the default ratio is true only when the viewport scale equals 1. Otherwise, the relationship between CSS pixels and device pixels depends on the current zoom level.

Viewport width and screen width

Sites can set their viewport to a specific size. For example, the definition  "width=320, initial-scale=1"  can be used to fit precisely onto a small phone display in portrait mode. This can cause  problems  when the browser doesn't render a page at a larger size. To fix this, browsers will expand the viewport width if necessary to fill the screen at the requested scale. This is especially useful on large-screen devices like the iPad. (Allen Pike's Choosing a viewport for iPad sites has a good explanation for web developers.)

For pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:

Other attributes  that are available are  minimum-scale , maximum-scale , and user-scalable . These properties affect the initial scale and width, as well as limiting changes in zoom level.

Not all mobile browsers handle orientation changes in the same way. For example, Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:

Common viewport sizes for mobile and tablet devices

If you want to know what mobile and tablet devices have which viewport widths, there is a comprehensive list of mobile and tablet viewport sizes here . This gives information such as viewport width on portrait and landscape orientation as well as physical screen size, operating system and the pixel density of the device.

Specifications

There is clearly demand for the viewport meta tag, since it is supported by most popular mobile browsers and used by thousands of web sites. It would be good to have a true standard for web pages to control viewport properties. As the standardization process proceeds, we at Mozilla will work to keep up to date with any changes.

Document Tags and Contributors

• MakeBrowserAgnostic
• NeedsUpdate

Using `theme-color` meta tag

If you use Safari 15 or above on macOS, you might have noticed that Safari has this option to enable coloured tab bar. By default, Safari automatically decides which colour to use for the tab bar based on your website’s accent colour. But it’s definitely possible to change this colour to a specific colour you might want.

And Safari is not the only browser that supports this feature. Safari on iOS, Chrome on Desktop app as well as Mobile app, and some other browsers also support it as per Can I Use .

This colour can be set to your preferred colour using theme-color meta tag in between <head> tag of your site.

Just place the above line in between your website’s head tag. You can change the Hex colour in content to the colour you want the tab bar to have on your website.

You also have the option to change this colour based on system theme. You can specify different colours for when the system is on light or when it’s on dark theme.

The first line in above code is to apply custom theme colour for tab bar when the system is in light mode and second one when on dark mode. This is a great way to customize browser as per your site design’s aesthetics.

A thing to note is that it only works in Safari when tab colors is enabled in Safari Preferences > Advanced > Show colour in compact tab bar . If it’s not enabled then Safari will show default gray color in light and black color in dark theme.

More blog posts

Generate dynamic open graph images in next.js, accepting payments using stripe for indian users, living on a boat, airport diaries ✈️, on leaving bigbinary, how i fixed "discovered not indexed" issue in google search.

Safari 15: New UI, Theme Colors, and… a CSS-Tricks Cameo!

There’s a 33-minute video (and resources) over on apple.com covering the upcoming Safari changes we saw in the WWDC keynote this year in much more detail. Look who’s got a little cameo in there:

Perhaps the most noticeable thing there in Safari 15 on iOS is URL bar at the bottom ! Dave was speculating in our little Discord watch party that this probably fixes the weird issues with 100vh stuff on iOS. But I really just don’t know, we’ll have to see when it comes out and we can play with it. I’d guess the expectation is that, in order for us to do our own fixed-bottom-UI stuff, we’d be doing:

On desktop, the most noticeable visual feature is probably the theme-color meta tags.

This isn’t even a brand new Apple-only thing. This is the same <meta> tag that Chrome’s Android app has used since 2014 , so you might already be sporting it on your own site. The addition is that it supports media queries.

It’s great to see Safari get aspect-ratio and the new fancy color systems like lab() and lch() as well. Top-level await in JavaScript is great as it makes patterns like conditional imports easier.

I don’t think all this would satisfy Alex . We didn’t exactly get alternative browser engines on iOS or significant PWA enhancements (both of which would be really great to see). But I applaud it all—it’s good stuff. While I do think Google generally takes privacy more seriously than what general internet chatter would have to believe, it’s notable to compare each company’s newly-released features. If you’ll forgive a bit of cherry-picking, Google is working on FLoC , a technology very specifically designed to help targeted advertising. Apple is working on Private Relay , a technology very specifically to making web browsing untrackable.

I’ve been using the iOS 15 beta for a few days, and I’ve liked how Safari handles the viewport height for the most part. While the URL bar is in its normal state, the viewport extends to the bottom of the screen (and going past the safe area on devices with a notch). The viewport shrinks down to right above the URL bar when it becomes hidden.

This video might explain it better than I can.

Last Christmas, my wife got me a new Android phone with 6” display. On it, Android 11 featured Chrome serach bar at the bottom. Firefox for Android also has search bar at the bottom by default (although this can be changed).

I suspect it has something to do with larger screen sizes and top part of the screen not being as acessible on handheld devices (espacially when using single-hand).

If I were to do design prediction, I would say we should see even more movement from headers toward rich footers in the future.

Yeh, I feel another pattern Apple are using is the card from the bottom, which improves the thumb reach area.

The URL bar at the bottom really bugs me. It seems that Apple believes that Safari is the primary app in itself, not a gateway to other experiences on the web.

I see no reason to have the most accessible part of the screen reserved for interacting with the URL bar instead of it being available to websites, to make them easier to use.

Though the notch on their latest models already killed more than 44 CSS pixels of the bottom for interactive use, the new URL bar now demands twice that and does it always, not just until the user has scrolled down the page.

Am I the only one who thinks this actually makes the 100vh issues way more complicated? Ugh.

This is a big change too:

Y’all see the new default html form controls in Safari???!? Woah 🤯 pic.twitter.com/PI6Wm4hhfh — Kevin Gutowski (@kevgski) June 12, 2021

This url bar on mobile is absolutely bad. What this means? You have to fix all old project for one browser! Stupid

There are quite a few bugs. For example, interfaces where you have fixed cards or absolute cards will cause the env() of the tab bar to inexplicably double. -> https://codepen.io/paul3fa/pen/gOmBxxY try this on your phone in debug mode, ios15

Has there been more research on how to handle the new address bar?

I just had to fix this in one of my current project. It seems that using bottom: env(safe-area-inset-bottom) worked out of the box for me, without the need for calc .

How do I get it to apply on Bottom address bar on Safari 15?

It should be default! But if not, 9to5Mac breaks down the steps which you can do with the Safari app open:

• In the address/search bar, tap the “aA” icon on the left (when on a website)
• Tap “Show Bottom Tab Bar”

Alternatively, you can also change the iOS 15 address/search bar by heading to the Settings app > Safari > swipe down and choose “Tab Bar.”

Hope this helps!

how can i disable the divider/border between the adressebar and the website? The divider/border appears only on iOS Safari. A few websites e.g. t3n.de does`t have it.

Best, Florian

Safari 15 still has issues with 3d transform e.g: transform: rotate3d(1, 0, 0, -60deg); Or -webkit-transform: rotate3d(1, 0, 0, -60deg)

it just not renders while any other browser can.

Also still issues with html5 video tags. Somehow IOS restrictions are applied for desktop too :”HTTP servers hosting media files for iOS must support byte-range requests”

Safari is becoming the IE of browsers …

Safari 15 Theme Color

Safari 15 adds a theme color for the tab bar. Safari can automatically pick a color based on the content or you can manually set the color with a meta tag.

Safari 15 Tab Bar Color

The Safari team at Apple have long been following a design trend of reducing the emphasis on the browser chrome to “defer to the content” . In Safari 15 that includes a more compact browser tab layout and having the tab bar take its color from the content.

By default, Safari attempts to set the color of the tab bar based on the page background or color of any header. For my site this seems to work on the iPhone and the iPad giving me a blue tinted tab and status bar that matches the page header.

On the desktop I see the unchanged white tab bar unless I manually set the theme color.

Setting The Theme Color

You can manually set the tab bar color if you don’t like the choice Safari is making. Add a meta tag in the HTML head with the name “theme-color” and the color you want to use in the content:

If you want a different color for light and dark color schemes use media queries:

Safari ignores colors that would hide the red, yellow and green window control buttons:

How Do I Turn It Off?

If you don’t like the tab bar tinting you can turn it off in the Safari preferences. On the desktop and the iPad it’s called “Show color in tab bar”:

On the iPhone, it’s called “Allow Website Tinting”:

I’m undecided if I like the effect. So far I’ve disabled it on the desktop but left it enabled on the iPad and iPhone.

• Design for Safari 15

Never Miss A Post

Sign up to get my iOS posts and news direct to your inbox and I'll also send you a PDF of my WWDC 2023 Viewing Guide

Unsubscribe at any time. See privacy policy .

TAG ® Safari

Clothing, gear & style. since 1990, authentic safari travel & adventure gear.

TAG® Safari

from $179.00

$179.00 $205.00

$75.00 $80.00

$72.00 $80.00

$75.00 $100.00

$72.00 $95.00

$189.00 $220.00

Sign up to Receive Discounts and Exclusive Special Offers sent Directly to your Email

Member & supporter of these fine organization.

Houston Safari Club

Wild Sheep Foundation

Advancing Girls Education In Africa

Dallas Safari Club

Texas Parks Wildlife

Sethus Orphans Trust

Safari Club International

Texas Association

Wild Conservation Society

World Wildlife Fund

Wateraid America

Sierra Club

HTML References

Html <meta> tag.

Describe metadata within an HTML document:

More "Try it Yourself" examples below.

Definition and Usage

The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.

<meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.

Metadata will not be displayed on the page, but is machine parsable.

Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.

There is a method to let web designers take control over the viewport (the user's visible area of a web page), through the <meta> tag (See "Setting The Viewport" example below).

Browser Support

Global attributes.

The <meta> tag also supports the Global Attributes in HTML .

Advertisement

More Examples

Define keywords for search engines:

Define a description of your web page:

Define the author of a page:

Refresh document every 30 seconds:

Setting the viewport to make your website look good on all devices:

Setting the Viewport

The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.

You should include the following <meta> element in all your web pages:

This gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.

You can read more about the viewport in our Responsive Web Design - The Viewport Tutorial .

Related Pages

HTML tutorial: HTML Head

HTML DOM reference: Meta Object

Default CSS Settings

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

Time to update your theme-color meta tag for Safari

There’s been a meta tag for specifying a theme-color for UI elements on websites for a while. If you’ve used it, now’s time to change that element along with the upcoming version of Safari.

The theme-color meta element specifies a CSS colour which browsers can use to customise their interfaces. For example, I specify our brand red for the Stuff & Nonsense website.

Until now, this meta tag hasn’t been very useful as it’s only been used by Chrome on sites which can be installed as progressive web apps. That’s changing with the new Safari 15—now available as a Technology Preview—which will ship with Monterey later this year.

Safari 15 uses theme-color to change the colour of its tab bar background and over-scroll area to make them blend better with a web page. Safari 15 on iOS also changes its status bar colour to match. This helps the toolbar to fade into the background, giving a more edge-to-edge experience.

In the past, Safari hasn’t allowed media attribute to specify theme-color meta tags for dark and light modes, but that’s changed with Safari 15. So I’ve updated my website’s meta tag with two colours:

This makes a big difference, because without these media attributes, the red toolbar feels more out of place with the dark mode blue page background than the system UI colour.

Safari users can turn off coloured toolbars with “Preferences > Advanced > Never Use Background color in toolbar” but I suspect most people will leave the default turned on. So, if you want to control what people see rather than have Safari choose a colour for them, now’s the time to update your theme-color meta tag for Safari.

Written by Andy Clarke who filed this in css .

Hire me. I’m available for coaching and to work on design projects.

• Book a call

• Google Nest Wi-Fi Pro 6E is $60 off
• Tesla is recalling Cybertrucks
• The best laptops for 2024
• Best Mint alternative

Meta is stuffing its AI chatbot into your Instagram DMs

Who needs to dm with friends when you can dm with a bot.

On Friday, people around the web noticed a new addition to their Instagram: Meta AI, the company’s general-purpose, AI-powered chatbot that can answer questions, write poetry and generate images with a simple text prompt. The move isn’t surprising. Meta revealed Meta AI in September 2023 and has spent the last few months adding the chatbot to products like Facebook Messenger and WhatsApp, so adding it to Instagram seems like a no-brainer.

Just got access to Meta AI on one of my Instagram accounts. pic.twitter.com/VNyRa5wbG4 — Krish Murjani  (@appleforever18) April 11, 2024

“Our generative AI-powered experiences are under development in various phases, and we’re testing a range of them publicly in a limited capacity,” a Meta spokesperson told Engadget, which suggests that not everyone has the feature available yet. TechCrunch , which first noted the news, said that Meta AI was showing up in Instagram’s search bar. But for some of us at Engadget, the feature actually showed up in the search bar in Instagram’s Direct Messaging inbox.

Tapping it let me start a conversation with Meta AI just I would DM a friend on Instagram. I was able to ask the chatbot to give me definitions of words, suggest headlines for some stories I’m working on, and generate images of dogs on skateboards. I was also able to ask Meta AI to recommend Reels with cats in them, which it was able to do easily. But when my colleague Aaron Souppouris asked Meta AI in WhatsApp to recommend Reels, it showed him some Reels in that app too — suggesting that the bot in Instagram isn’t really doing anything specific to Instagram. Instead, Meta is simply shoehorning the same chatbot into every app it owns. If you tap a hamburger menu within the bot, Meta AI will also show you a long list of possible actions you ask the bot to take.

Why would you want a chatbot in Instagram to suggest tips for dealing with credit card debit, have a debate about cardio versus weights, or suggest hacks to travel with points, I do not know. But the point is that if you want to, you can.

Latest Stories

House votes in favor of bill that could ban tiktok, sending it onward to senate.

The US House of Representatives on Saturday passed a revised version of the bill that could ban TikTok. The bill was included with a package on foreign aid. It'll now go on to Senate, which is likely to vote on it very soon.

Tesla cuts Model Y, X and S prices in the US and says it’s ending the referral program

Tesla has slashed the prices of its Model Y, X and S vehicles by $2,000 each. The company announced the price cut for US buyers on X. It also said it's ending its referral program benefits in all markets.

What we're listening to: The Tortured Poets Department and Eternal Sunshine

Reviews Editor Cherlynn Low dives into new releases from Taylor Swift and Ariana Grande, and explores what music means to us when songs are consumed more like books and journal entries.

Apple will reportedly unveil a genre-defining calculator app at WWDC 2024

The new Mac calculator will reportedly have round buttons and Notes integration.

Microsoft's AI tool can turn photos into realistic videos of people talking and singing

Microsoft Research Asia has unveiled a new experimental AI tool called VASA-1 that can take a still image of a person — or the drawing of one — and an existing audio file to create a lifelike talking face out of them in real time.

Finally, someone used Pareto’s economic theories to find the best Mario Kart 8 racer

Who hasn’t spent sleepless nights pondering what would happen if we applied the theories of Vilfredo Pareto, the early 20th-century Italian economist, to Mario, the Mushroom Kingdom’s Italian high-jump champion and part-time elephant cosplayer? Data scientist Antoine Mayerowitz, PhD, tackled that age-old question.

Rebel Moon Part 2 review: A slow-mo sci-fi slog

Rebel Moon: Part 2 - The Scargiver is an empty feast, a relentless onslaught of explosions, sci-fi tropes and meaningless exposition that amounts to nothing.

Prison Architect 2 is denied release until September 3

Double Eleven and publisher Paradox Interactive have delayed Prison Architect 2 by four moths to work on technical issues.

Ryan Gosling and Miller/Lord’s Project Hail Mary could be the sci-fi event of 2026

Amazon MGM just set a March 20, 2026 release date for Project Hail Mary, an adaptation of the Andy Weir novel. The film stars Ryan Gosling and is directed by Phil Lord and Christopher Miller.

Some of our favorite Anker power banks are up to 30 percent off, plus the rest of this week's best tech deals

Engadget's weekly deals roundup includes sales on Sonos, Apple, iRobot, Google Nest and more.

Automate your vacuuming and mopping with $400 off the Roomba Combo J9+

If you’re looking to automate more of your home cleaning setup, iRobot’s flagship Roomba Combo J9+ is on sale for $400 off. The vacuum-mop hybrid robot, which only arrived last fall, has a redesigned dock that automatically empties debris and refills the device’s mopping liquid.

Tesla is recalling Cybertrucks because their accelerator pedals could get stuck

Tesla has issued a recall for around 3,878 Cybertruck vehicles, a National Highway Traffic Safety Administration notice has revealed.

Engadget Podcast: PlayStation 5 Pro rumors and a look back at the Playdate

This week, Engadget Senior Editor Jessica Conditt joins Cherlynn and Devindra to chat about the PS5 Pro, as well as her piece on the PlayDate two years after its release.

The Morning After: The bill to ban TikTok is barreling ahead.

The biggest news stories this morning include US vs China in the form of TikTok vs WhatsApp, and did you know Taylor Swift has a new album out?

Fallout has already scored a green light for a second season

Amazon has renewed the hit show for a second season.

Baldur's Gate 3 developer confirms it won't make the sequel

The developer behind the popular, award-winning and slightly bawdy Baldur's Gate 3 may not be doing a sequel, but it does have other irons in the fire.

The best PS5 games for 2024: Top PlayStation titles to play right now

Here are the best games you can get for the PlayStation 5 right now, as chosen by Engadget editors.

The 6 best Mint alternatives to replace the budgeting app that shut down

Intuit has shut down the popular budgeting app Mint. Engadget tested a bunch of popular alternatives. Here are our favorites.

Apple says it was ordered to remove WhatsApp and Threads from China App Store

China's Cyberspace Administration ordered Apple to pull Threads and WhatsApp from its App Store in the country, the company said.

Surprise: Taylor Swift is joining Threads at the exact same time as her new album drop

Taylor's Threads account, and her first post, are going live around midnight.

Meta adds its AI chatbot, powered by Llama 3, to the search bar across its apps

Meta’s making several big moves today to promote its AI services across its platform. The company has upgraded its AI chatbot with its newest large language model, Llama 3, and it is now running it in the search bar of its four major apps (Facebook, Messenger, Instagram and WhatsApp) across multiple countries. Alongside this, the company launched other new features, such as faster image generation and access to web search results.

This confirms and extends a test that TechCrunch reported on last week , when we spotted that the company had started testing Meta AI on Instagram’s search bar.

Additionally, the company is also launching a new meta.ai site for users to access the chatbot.

The news underscores Meta’s efforts to stake out a position as a mover and shaker amid the current hype for generative AI tools among consumers. Chasing after other popular services in the market such as those from OpenAI, Mark Zuckerberg claimed today that Meta AI is possibly the “most intelligent AI assistant that you can freely use.”

Meta first rolled out Meta AI in the U.S. last year . It is now expanding the chatbot in the English language in over a dozen countries, including Australia, Canada, Ghana, Jamaica, Malawi, New Zealand, Nigeria, Pakistan, Singapore, South Africa, Uganda, Zambia and Zimbabwe.

The company last week started testing Meta AI in countries like India and Nigeria , but notably, India was missing from today’s announcement. Meta said that it plans to keep Meta AI in test mode in the country at the moment.

“We continue to learn from our users tests in India. As we do with many of our AI products and features, we test them publicly in varying phases and in a limited capacity,” a company spokesperson said in a statement.

New features

Users could already ask Meta AI for writing or recipe suggestions. Now, they can also ask for web-related results powered by Google and Bing.

Image Credits: Meta

The company said that it is also making image generation faster. Plus, users can ask Meta AI to animate an image or turn an image into a GIF. Users can see the AI tool modifying the image in real time as they type. The company has also worked on making image quality of AI-generated photos better.

AI-powered image-generation tools have been bad at spelling out words . Meta claims that its new model has also shown improvements in this area.

Why is AI so bad at spelling? Because image generators aren’t actually reading text

All AI things everywhere at once

Meta is adopting the approach of having Meta AI available in as many places as it can. It is making the bot available on the search bar, in individual and group chats and even in the feed.

The company said that you can ask questions related to posts in your Facebook feed. For example, if you see a photo of the aurora borealis, you could ask Meta AI for suggestions about what is the best time to visit Iceland to see northern lights.

Meta AI is already available on the Ray-Ban smart glasses, and the company said that soon it will be available on the Meta Quest headset, too.

There are downsides to having AI in so many places. Specifically, the models can “hallucinate” and make up random, often non-sensical responses, so using them across multiple platforms could end up presenting a content moderation nightmare. Earlier this week, 404 Media reported that Meta AI, chatting in a parents group, said that it had a gifted and academically challenged child who attended a particular school in New York. (Parents spotted the odd message, and Meta eventually also weighed in and removed the answer, saying that the company would continue to work on improving these systems.)

“We share information within the features themselves to help people understand that AI might return inaccurate or inappropriate outputs. Since we launched, we’ve constantly released updates and improvements to our models, and we’re continuing to work on making them better,” Meta told 404 Media.

Moscow Tours & Travel Packages 2024/2025

Our 60 most popular moscow trips. compare tour itineraries from 45 tour companies. 308 reviews. 4.7/5 avg rating., popular moscow tours.

St Petersburg & Moscow in Style - Winter

• Explore the majestic St Petersburg & Moscow on private city tours
• Admire the rich Russian history, art and architecture
• Travel to Moscow on a highspeed train
• Enjoy the local cuisine in stylish restaurants

Lower Volga Voyage

• Visit magnificent Red Square and Kremlin and examine the collection at theKremlin’s State Armory.
• Experience Russia’s diverse musical traditions at lively folk music performances
• Explore Volgograd, the site of the decisive battle of World War II’s eastern front

Volga Dream Russian River Cruise

St Petersburg & Moscow in Style - Summer

White Russian - 7 days

• Discover Moscow's UNESCO-listed Red Square, home to spectacular St Basil’s Cathedral, Lenin's Mausoleum and the historic GUM Department store
• Explore the grounds of Moscow's mighty Kremlin, with its numerous governmentbuildings, gold-domed cathedrals and the giant tsar bell
• Celebrate New Year's Eve in Moscow!
• Take in the highlights of St Petersburg including a guided tour of the exquisite Church on Spilled Blood, Peter & Paul Fortress and Cathedral
• Take a guided tour of the remarkable Hermitage Museum at the Winter Palace

Vodka Shot - 6 days

• Explore the beautiful city of St Petersburg, including the exquisite Church on Spilled Blood, Peter & Paul Fortress and Nevsky Prospekt
• Marvel at the dazzling array of art and exhibits in the world-famous Hermitage Museum, at the Winter Palace in St Petersburg
• Discover a lavish residence of the tsars on a day trip to Catherine Palace at Tsarkoe Selo (winter: mid-October to April) or Peterhof Palace and gardens (summer: May to mid-October)
• Take in the highlights of the capital on a walking tour, visiting Moscow's famous Red Square, home to the historic GUM Department Store, Lenin’s Mausoleum and spectacular St Basil’s Cathedral
• Take a guided tour of the Moscow Kremlin, Russia’s political power house. Stroll around the grounds of this fortified complex, visit the Kremlin's cathedrals and see the mighty Tsar Bell

Route of the Romanovs - 10 days

• Learn about the last days of the Romanovs in Yekaterinburg, visiting the sites where Tsar Nicolas II and his family were assassinated and buried
• Straddle two continents at the famous obelisk Europe/Asia border marker in Yekaterinburg
• Experience the Trans-Siberian railway on an overnight train journey from Moscow to Yekaterinburg

New Year's in Moscow - 9 days

• Visit Catherine Palace at Tsarkoe Selo on Christmas Day and marvel at the incredible Amber Room
• Spend a night in Novgorod, an ancient city by the Volkhov River - explore the kremlin, cathedral and other sights and enjoy a traditional Russian banya (sauna)

All Moscow , expedition cruises, self guided adventures and vacation packages. Find the best guided and expert planned vacation and holiday packages. Read more about Moscow

Small Group Moscow Tours

Back in the USSR - 7 days

Russian Revolution - 9 days

• Visit historic Novgorod, an ancient city which straddles the Volkhov River. Explore the attractive riverside kremlin and experience a traditional Russian banya (sauna)

The Snowball - 6 days

• Visit Catherine Palace at Tsarkoe Selo and marvel at the incredible Amber Room

Mood for Moscow - 4 days

• Head underground to visit a Stalinist-era Soviet Bunker on an optional excursion
• Stroll to the vibrant Izmailovo Market, which lies behind the walls of an ancient Kremlin, and shop for an array of souvenirs

Best Moscow Tours by Duration

Tours, Cruises & Private Trips

Best Moscow Tours by Price

Top Moscow Attractions & Experiences

Moscow Tours & Travel Guide

Moscow Attractions & Landmarks Guide

Moscow reviews & ratings, capitals of the north.

some hotels could have been better

It was jam packed with every place I wanted to go and see. I especially love my photo of us setting out on the night time river cruise in St Petersburg and the Peter...

I really did not buy much and what I did buy was small gifts for others .

Johanna-Marie

Good hotels, some better than others. Interesting itinerary

Too rushed. Optional tour rather too short

See all Moscow reviews

Moscow Tours FAQ

1. Does Travelstride have all the tour operators?

2. How does the Member Savings program save me money?

3. Can I trust the tour operator and trip reviews on Travelstride?

4. What does ‘Stride Preferred’ mean?

• About ParkNews
• Privacy Policy

FEIG ELECTRONIC: Moscow-City Skyscrapers Streamline Parking Access and Control with Secure RFID

Feig electronic partners with isbc group to deploy ucode dna rfid security and parking access control solution in moscow business district.

Weilburg, Germany  — December 3,  2019  —  FEIG ELECTRONIC , a leading global supplier of radio frequency identification (RFID) readers and antennas with fifty years of industry experience, announces deployment of the UCODE DNA RFID security and parking contactless identification solution in the Moscow International Business Center, known as Moscow-City, one of the world’s largest business district projects.

The management of Moscow-City not only selected long-range, passive UHF RFID to implement in its controlled parking areas, it also chose to implement UCODE DNA , the highest form of secure RAIN RFID technology, developed by NXP Semiconductors.

Panoramic view of Moscow city and Moskva River at sunset. New modern futuristic skyscrapers of Moscow-City – International Business Center, toned

“Underscoring NXP’s innovation and leadership in developing advanced RAIN RFID technologies, our UCODE DNA was chosen to be incorporated with the FEIG and ISBC implementation of the contactless identification system in the prestigious Moscow-City,” said Mahdi Mekic, marketing director for RAIN RFID with NXP Semiconductors. “This exciting project represents yet another successful deployment of NXP’s contactless portfolio, and showcases our continued ability to meet the high-security requirements of highly demanding applications without compromising user convenience.”

“UCODE DNA is considered the only identification technology to match the physical protection of a barrier with the cybersecurity necessary to truly protect entrances from unauthorized access,” said Manuel Haertlé, senior product manager for FEIG Electronic. “As a respected contactless payment technology company, FEIG applies security know-how from its payment terminals, which are fully certified according to the latest high-class security standards, into our RFID systems. FEIG vehicle access control RFID readers incorporate advanced secure key storage elements, supporting various methods for secure key injection.”

FEIG’s partner ISBC Group provided the knowledge and support for this successful implementation using  FEIG’s long-range UHF RFID . The resulting system enables authorized vehicle entry into areas reserved for private residential use or corporate tenants, while also allowing availability of temporary, fee-based visitor parking. Thanks to the cryptographic authentication of UCODE DNA, both the tag and reader must go through an authentication procedure before the reader will validate the data from the tag, which is transmitted wirelessly. This level of authentication is typically used in the most secure data communication networks.

“The system’s two-step authentication means that only authorized equipment can handle the secure protocol and the data exchange with the UCODE DNA based tag. Without the required cryptographic secrets, other readers would query the tag in vain, because the tag’s response cannot be interpreted or understood,” said Andrey Krasovskiy, director of the RFID department at ISBC Group. “On top of this, each data exchange in the authentication process is unique, so even if a malicious actor were to intercept the communication, the transmission is only good for a single exchange and the tag’s unique identity is protected from cloning.”

Established in 1992 and still growing, Moscow-City is the revitalization and transformation of an industrial riverfront into a new, modern, vibrant and upscale business and residential district. A mix of residential, hotel, office, retail and entertainment facilities, it is located about four kilometers west of Red Square along the Moscow River. Twelve of the twenty-three planned facilities have already been completed, with seven currently under construction. Six skyscrapers in Moscow-City reach a height of at least 300 meters, including Europe’s tallest building, Federation Tower, which rises more than 100 stories.

Partnering with ISBC and deploying FEIG Electronic RFID solutions, the Moscow International Business Center is delivering security and access control to its city center today, as it grows into the city of tomorrow.

About FEIG ELECTRONIC

FEIG ELECTRONIC GmbH, a leading global supplier of RFID readers and antennas is one of the few suppliers worldwide offering RFID readers and antennas for all standard operating frequencies: LF (125 kHz), HF (13.56 MHz), UHF (860-960 MHz). A trusted pioneer in RFID with more than 50 years of industry experience, FEIG ELECTRONIC delivers unrivaled data collection, authentication, and identification solutions, as well as secure contactless payment systems. Readers from FEIG ELECTRONIC, which are available for plug-in, desktop, and handheld applications, support next-generation contactless credit cards, debit cards, smart cards, NFC and access control credentials to enable fast, accurate, reliable and secure transactions. For more information, visit:  www.feig.de/en

Founded in Moscow in 2002, ISBC Group provides knowledge and support to integrators for their successful implementation of RFID and smart card-based solutions. The company specializes in the distribution of smart card equipment, contact and contactless card manufacturing, smart card and RFID personalization services, and information security.  Its Research and Design Center is focused specifically on RFID, primarily HF and UHF solutions with NXP tags, and software development for the smart card industry. For more information visit:  https://isbc-cards.com/

← Previous Post

Next Post →

Privacy Overview

Shooter Files by f.d. walker

Street Photography Tips, Interaction, Travel, Guides

Apr 24 2017

City Street Guides by f.d. walker: A Street Photography Guide to Moscow, Russia

*A series of guides on shooting Street Photography in cities around the world. Find the best spots to shoot, things to capture, street walks, street tips, safety concerns, and more for cities around the world. I have personally researched, explored and shot Street Photography in every city that I create a guide for. So you can be ready to capture the streets as soon as you step outside with your camera!

At over 12 million people, Moscow is the largest city in Russia and second largest in Europe by population ( Istanbul is #1). An urban, cosmopolitan metropolis with more than enough glitz and glam to cater to the elite, but without losing its fair share of Soviet era roughness around the edges. It can be fast paced, brash, busy, and trendy like other big cities, but it has its blend of West meets Russia atmosphere and beauty that provides plenty of unique interest. The Red Square is as famous as it gets, but there’s so much more to this city, including the most beautiful subway system you’ve ever seen. It would take years to capture all of Moscow, but that means you have an endless amount of areas to discover.

So here’s a Street Photography guide so you can be ready to capture all that Moscow has to offer before you even arrive!

• Patriarch’s Pond
• Old Arbat Street
• Maroseyka Street
• Tverskoy Boulevard

Top 5 Street Spots:

1. red square.

The Red Square is the most famous square in not just Russia, but all of Eastern Europe. The name actually doesn’t come from the color of the bricks or communism, but from the name in Russian, Krásnaya, once meaning “beautiful” before its meaning changed to “red.” This large plaza is what you see on the cover of guide books and magazines for Moscow, with St. Basil’s Cathedral being the center piece next to Lenin’s Mausoleum surrounded by the Kremlin Wall. Of course, the Red Square attracts hordes of tourist due to the main attractions, but all that activity around an interesting atmosphere does provide street photo opportunities. It’s also the central square connecting to the city’s major streets, providing a good starting point to explore outward.

You’ll also find the popular pedestrian only Nikolskaya Street connecting the Red Square to Lubyanka Square. This line of expensive shops includes plenty of activity, while also leading you to another popular square. Filled with history rivaling any city, the Red Square and surrounding areas are the heart and soul of Russia.

2. Patriarch’s Ponds

Patriarch’s Ponds is one of the most exclusive neighborhoods in Moscow. Despite the name being plural, there’s only one large pond, but it’s worth a visit with your camera. It’s a popular spot for locals and expats to come relax or take a stroll around the pond. You get an interesting mix of young and old too, from young love to “babushkas” feeding pigeons. It’s a very peaceful park atmosphere in one of the nicer areas within the city center, while bringing enough activity for street photography. 

The pond is shallow and in the winter becomes a popular spot for ice-skating too. The area is also well-known for the location in the famous Russian novel, The Master and Margarita. 

3. Old Arbat (Stary Arbat)

Old Arbat is the most famous pedestrian street in Moscow, and dating back to the 15th century, also one of its oldest. Originally, it was an area of trade, but soon became the most prestigious residential area in Moscow. During the 18th century, Arbat started attracting the city’s scholars and artists, including Alexander Pushkin. Cafes lined the streets and impressive homes filled the neighborhood. Since then, New Arbat street was created as a highway in the area, while Old Arbat was paved for a 1km pedestrian only walkway.

Due to the historic buildings, famous artists that lived here, and the bohemian atmosphere, Old Arbat has become a big attraction for tourists today. Now, there’s a mix of cafes, restaurants, souvenir shops, street performers, street merchants and other attractions for visitors, and some locals, to come enjoy. It can get really busy here and there’s usually something interesting going on so it’s a good street to come walk with your camera for guaranteed life.

4. Gorky Park

One of the most famous places in Moscow is Gorky Park. The official name is Maxim Gorky’s Central Park of Culture & Leisure, which gives you an idea of what goes on here. When built, it was the first of its kind in the Soviet Union. Divided into two parts, it stretches along Moscow River. One end contains fair rides, foods stands, tennis courts, a sports club, a lake for boat rides, and more. This end brings more active life due to its number of attractions, while the other end is more relaxed, where you’ll find gardens, trees, older buildings, and an outdoor amphitheater.

Gorky Park attracts mostly locals so it’s a good spot to capture the non-tourist side of Moscow life. Muscovites come here to escape the city and unwind in a picturesque setting. The park remains alive outside of the warmer months too, especially when the lake turns into the city’s largest outdoor skating rink. I’d recommend taking the metro out here to spend at least half a day exploring the massive park’s life with your camera.

5. Maroseyka Street

Maroseyka Street is a popular area not too far from the Red Square. The long, winding street turns into Pokrovka and is lined with restaurants, cafes, bars and places to stay. It’s actually where I like to stay when I’m in Moscow due to its location and solid street photography opportunities itself. You have Kitay-gorod station near and if you keep walking southwest, you’ll get to the Red Square. But if you walk northwest, as it changes to Pokrovka, you can find a long street of activity for photography with its own interesting atmosphere.

6. Tverskoy Boulevard

Tverskoy Boulevard is the oldest and longest boulevard in Moscow, beginning at the end of Nikitsky Boulevard, and finishing at Pushkin Square, a spot to come for activity itself. The boulevard is made up of two avenues, with pedestrian walkways in-between. You’ll find grass, shrubbery, trees, benches and more walking it’s almost kilometer length. Many people come here to enjoy some relaxation, walk their dog, or just to use it to walk wherever they’re going. Its center location also provides a nice place to walk with your camera near plenty of other spots you’ll want to check out anyway.

Sample Street Walk:

For a full day of Street Photography, covering some of the best spots, you can follow this sample street walk for Moscow:

• Start your morning walking around the Red Square (1), while exploring the surrounding area, including Nikolskaya Street
• Then walk northwest to Patriarch’s Ponds (2) and slowly walk the pond and surrounding area with your camera
• Next, walk east to the Pushkin Monument and stroll down Tverskoy Boulevard (6)
• Once Tverskoy Boulevard (6) ends, it will turn into Nikitsky Boulevard. Follow this down until you get to the start of Old Arbat Street (3), across from Arbatskaya station
• After you’re done walking down Old Arbat Street (3) for more street photography, spend some time checking out Moscow’s beautiful metro stations
• To finish off the day with more street photography, get off the metro near Red Square (1) again, Maroseyka Street (5) or wherever you’re staying for the night.

3 Things I’ll Remember about Shooting in Moscow:

1. museum metro.

The Moscow metro system was the first underground railway system in the Soviet Union and today includes 203 stations across 340km of routes. The elaborate system has some of the deepest stations in the world too, with escalators that seem to go on forever. None of this is what makes it so special, though. Many of its stations feel like stepping inside a museum, making it without a doubt the most interesting and beautiful metro system I’ve been in.

When built, Stalin wanted to make the metro stations “palaces for the people” with marble, chandeliers, and grand architecture. The best part is the variety of architecture and styles used, making many of the stations a completely different experience visually. You could easily spend a whole day traveling the stations and there are even tours available for people who wish to do just that. My advice, though, would be just to buy a ticket and hop on and off at different stations, while exploring different lines. The museum-like surrounding mixed with the crowds of characters can make for a great photography experience.

Since there are so many stations, here are some of my favorites to check out:

• Novoslobodskaya
• Mayakovskaya
• Elektrozavodskaya
• Komsomolskaya
• Ploschad Revolyutsii
• Dostoyevskaya
• Prospekt Mira

2. Moscow is Big

It’s no secret that Moscow is a big city, but it can feel even bigger with how spread out much of it is. This is especially true if you compare it to cities outside of Asia. If I compared it to cities in Europe, I’d probably say only Istanbul would warrant more time to really discover the depths of this city. Most only explore around the Red Square and surrounding area, but that is such a small part of the city. Although, that central area does give you plenty to see on its own.

Fortunately, I had a good friend living in the city to show me around, but it opened up my eyes even more to how much there is to discover in Moscow. It’s a big city with a variety of atmosphere that can take you from “east” to “west” and trendy to rugged depending on where you go. I’d imagine you’d have to live here a while to really know the city.

3. Cosmopolitan Mix of East meets West

Modern skyscrapers mixed with amazing architecture, a world-class metro system with museum-like beauty, trendy fashion and chic clubs, Moscow is a rich mix of Russian culture and history in a more western cosmopolitan package. There is a push to keep the Russian culture, while also pushing forward with a modern metropolis the whole world will envy. This comes with an impressive skyline, that continues to grow, and endless modernities, but with soviet nostalgia and atmosphere mixed in for good measure.

Mixed in with this grand western cosmopolitan atmosphere, is a strong national pride in Russia. This includes their famous leader, Vladimir Putin. Maybe no other place will you see a country’s leader more often. All over, from the pricey tourist shops to the underground walkway stalls, you’ll find goods with Putin’s likeness covering them. From t-shirts to magnets to Matryoshka dolls. There’s a strong national pride that can be seen around the city, which also extends to their leader. Moscow is many things. It’s East meets West, modernizations meets Soviet era, and a whole lot more.

What To Do For a Street Photography Break?:

Eat at a stolovaya.

Stolovayas are Russian cafeterias that became popular in the Soviet days. You grab a tray and walk down the line of freshly prepared local dishes, and select whatever you want from the chefs. They’re usually inexpensive and a much better value than restaurants, while giving you the opportunity to try from a wide selection of everyday Russian food. They’re also very tasty. I always include some borsch on my tray and go from there. The places themselves are all over Moscow and usually come with Soviet-era aesthetics to complete the experience.

Street Safety Score: 7

*As always, no place is completely safe! So when I talk about safety, I’m speaking in general comparison to other places. Always take precaution, be smart, observe your surroundings and trust your instincts anywhere you go!

Being the 2nd largest city in Europe with over 12 million people, you’re going to have your dangerous areas, but for the most part, it feels safe walking around. Russia is statistically higher in crime compared to most of Europe, but this generally doesn’t apply to tourists and visitors. Around the Red Square and surrounding city center, you should feel completely safe walking around. Pick pocketing can happen, but no more than other touristic places. I always explore Moscow freely without coming across too much to worry about. It’s a spread out city, though, so of course it matters where you are. Just use basic street smarts, know where you are and Moscow shouldn’t give you a problem. 

People’s Reaction Score: 7

Moscow is fast paced, big city life, which usually means people aren’t too concerned with you, or your camera. I don’t find people notice or pay much attention to me when I’m out taking photos in Moscow. For the most part, people just go about their day. You shouldn’t get too many looks or concern. But it can depend on the area you are in. The more you stick out, the more you might get noticed with suspicions. I’ve never had any problems in Moscow, or Russia, but just be careful who you’re taking a photo of if you get out of the city center. Other than that, it’s about average for reactions. 

Street Tips:

Learn the alphabet .

Much of Moscow, including the metro system, doesn’t use english. The Russian alphabet uses letters from the Cyrillic script, which if you aren’t familiar with it and don’t know the sounds, can be hard to decipher the words. This is most important for street names and metro stops when trying to get around. It can save confusion and make it easier getting around if you learn the basic alphabet. At the very least then, you can sound out the words to see which are similar in the english conversion, which can help matching them to maps. When out shooting street photography, getting around is as important as anything. So save yourself some time and frustration by learning the Russian Alphabet.

Use the metro

While Saint-Petersburg feels very walkable for a city its size, Moscow can feel very spread out, even for its bigger size. Outside of the Red Square area, you can have plenty of walking before getting anywhere very interesting, so you’ll need to take the metro a lot if you really want to explore the city. Maps are deceiving here too, it will always be further than it looks.

Another reason it’s less walkable than Saint-Petersburg is its completely different set-up. Moscow’s streets are mostly contstructed in rings with narrow, winding streets in-between. This is common with medieval city cities that used to be confined by walls, but you usually don’t have it in a city this massive. Saint-Petersburg has a more grid-like pattern that also uses the canals to help you know your way around. When it comes to navigating on foot in Moscow, it can be more difficult, so bring a map and take the metro when needed. It’s why Moscow’s metro carries more passengers per day than the London and Paris subways combined.

Explore other areas if you have time

Moscow is really big. While most people stay around the Red Square within the Boulevard Ring, there’s so much more to the city. I covered some other spots outside of this circle, but if you really want to see the city, you’ll need time. If you do have time, some other areas I’d check out first are Zamoskvarechye, along some of the south and western Moscow.

Inspiration:

For some more inspiration, you can look through the Street Photography of Moscow photographer Artem Zhitenev  and check out 33 of my photos taken in Moscow .

Conclusion:

Moscow’s name brings a certain mystique, but once you’re there it might bring a different atmosphere than you expect. It’s big and sprawling, but beautiful in many ways. It can feel like a European capital on a grand scale, but you can definitely find its Russian side in there.

The urban sprawl of Moscow can be intimidating, but give it enough time and you’ll be rewarded with plenty to discover. All with the world’s best metro system to take you around.

I hope this guide can help you start to experience some of what Moscow contains. So grab your camera and capture all that Moscow has to offer for Street Photography!

If you still have any questions about shooting in Moscow, feel free to comment below or email me!

(I want to make these guides as valuable as possible for all of you so add any ideas on improvements, including addition requests, in the comment section!)

Click Here For More City Street Guides!

(A New Guide Posted Every Other Wednesday)

Comment Here! Cancel reply

For patreon exclusive educational content:.

Limited Edition Postcard Prints!

Street Photography Workshops

Donations Always Appreciated

I'll always keep Shooter Files free for everyone, but any donations would be greatly appreciated and help me keep it going. Many thanks to everyone following along!

Cheers! -f.d. walker

Search the Files

Meta wants to add its AI chatbot into your Instagram search bar

Instagram users may soon be able to leverage AI when searching for content. Meta is testing a new Instagram feature that loads its Meta AI chatbot when you tap the Instagram search bar. 

When it's integrated in this way, Meta AI would be able to help you find specific content on Instagram. You can ask a specific question or select one of the pre-loaded suggestions.

Also: Meta releases OpenEQA to test how AI understands the world, for home robots and smart glasses

A few people contacted by TechCrunch revealed that they used the AI to seek out Reels video clips. In one example, a user tapped a suggestion for "Beautiful Maui sunset Reels" and was treated to some of the best sunsets found in Reels videos .

A Meta spokesperson told ZDNET: "We don't have anything to share today, but our generative AI-powered experiences are under development in varying phases, and we're testing a range of them publicly in a limited capacity."

Instagram users have complained on Reddit about the app's search flaws and limitations. Adding an AI chatbot should give Instagram users more control and assistance when looking for accounts, Reels videos, audio clips, places, tags, and other content.

Meta is also expanding Meta AI to other platforms and other countries. The company told TechCrunch that its AI chatbot is being tested across WhatsApp, Instagram, and Messenger in India and parts of Africa. More than 500 million of WhatApp's 2 billion users  are in India, making it WhatsApp's biggest market.

Also: Meta unveils second-gen AI training and inference chip

Meta launched its AI chatbot in September 2023 . Meta AI is designed to respond to basic questions and requests. By integrating Meta AI into Instagram, WhatsApp, and Messenger, Meta clearly wants to see the chatbot helping users with specific types of content and features.

Meta AI is currently powered by Meta's Llama 2 large language model (LLM). Meta plans to begin rolling out its more powerful and advanced Llama 3 models this month .

Meta is testing direct messages in Threads, but with an Instagram twist

How to get started with meta ai in facebook, instagram, and more, linkedin is testing a tiktok-like feed for short-form videos.

THE 5 BEST Moscow Safaris

Safaris in moscow.

• Adrenaline & Extreme Tours
• Gear Rentals
• Nature & Wildlife Tours
• 5.0 of 5 bubbles
• District Central (TsAO)
• 3rd Transport Ring (TTK)
• District North-Eastern (SVAO)
• District Eastern (VAO)
• District South-Western (YuZAO)
• Lomonosovskiy
• Ostankinskiy
• Meshchanskiy
• Krasnoselskiy
• Maryina Roshcha (Jewish Quarter)
• Good for Couples
• Good for Kids
• Good for Big Groups
• Adventurous
• Budget-friendly
• Good for a Rainy Day
• Hidden Gems
• Honeymoon spot
• Good for Adrenaline Seekers
• Things to do ranked using Tripadvisor data including reviews, ratings, photos, and popularity.

1. Rybokhotsoyuz

2. Easy Russia Tour Guide

3. UTS GROUP

4. 365AltaiMongolia

5. #1 Russia -Tanzania | Zanzibar, Serengeti Safari & Kilimanjaro Agency | BURIGI CHATO SAFARIS CO LTD

6. Aviashop.Ru

7. Transsib Moscow

8. BASK TOUR

• Easy Russia Tour Guide
• #1 Russia -Tanzania | Zanzibar, Serengeti Safari & Kilimanjaro Agency | BURIGI CHATO SAFARIS CO LTD
• 365AltaiMongolia