You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
6.8 KiB
130 lines
6.8 KiB
<?php
|
|
namespace kuzik\meta;
|
|
|
|
require __DIR__.'/lib/config.php';
|
|
|
|
/**
|
|
* _meta_intranet
|
|
*
|
|
* "Compatibility View" logic was only included in IE8, IE9 and
|
|
* IE10. It was only introduced in IE8 and was disabled in IE11.
|
|
#
|
|
* If the user is browsing a page located in the "Local Intranet"
|
|
* zone (such as on a corporate intranet), the "compatibility view"
|
|
* is turned on by default. This is when to use "X-UA-Compatible"
|
|
* to force IE to use the latest engine.
|
|
#
|
|
* Reference:
|
|
* - https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/bg182625(v=vs.85)#document-mode-changes
|
|
* - https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do
|
|
*/
|
|
function _meta_intranet() {
|
|
global $config;
|
|
|
|
return $config['INTRANET']?'<meta http-equiv="X-UA-Compatible" content="IE=edge">':'';
|
|
}
|
|
|
|
/**
|
|
* _meta_viewport
|
|
*
|
|
*
|
|
* Screen Density
|
|
* --------------
|
|
* - `initial-scale`: `1`
|
|
* Controls the zoom level when the page is first loaded.
|
|
* Minimum: `0.1`. Maximum: `10`
|
|
*
|
|
* 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.
|
|
*
|
|
* Screen Size
|
|
* -----------
|
|
`width`
|
|
|
|
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 [100vw](https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport), or 100% of the viewport width. Minimum: `1`. Maximum: `10000`. Negative values: ignored.
|
|
|
|
`height`
|
|
|
|
Controls the size of the viewport. It can be set to a specific number of pixels like `height=400` or to the special value `device-height`, which is [100vh](https://developer.mozilla.org/en-US/docs/Web/CSS/length#vh), or 100% of the viewport height. Minimum: `1`. Maximum: `10000`. Negative values: ignored.
|
|
|
|
`minimum-scale`
|
|
|
|
Controls how much zoom out is allowed on the page. Minimum: `0.1`. Maximum: `10`. Default: `0.1`. Negative values: ignored.
|
|
|
|
`maximum-scale`
|
|
|
|
Controls how much zoom in is allowed on the page. Any value less than 3 fails accessibility. Minimum: `0.1`. Maximum: `10`. Default: `10`. Negative values: ignored.
|
|
|
|
`user-scalable`
|
|
|
|
Controls whether zoom in and zoom out actions are allowed on the page. Valid values: `0`, `1`, `yes`, or `no`. Default: `1`, which is the same as `yes`. Setting the value to `0`, which is the same as `no`, is against Web Content Accessibility Guidelines (WCAG).
|
|
|
|
`interactive-widget`
|
|
|
|
Specifies the effect that interactive UI widgets, such as a virtual keyboard, have on the page's viewports. Valid values: `resizes-visual`, `resizes-content`, or `overlays-content`. Default: `resizes-visual`.
|
|
|
|
# <meta name="viewport" content="viewport-fit=auto, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no
|
|
# minimum-scale=1, maximum-scale=1,
|
|
#
|
|
# maximum-scale=1 prevents Safari from zooming in when a text field is focused
|
|
#viewport-fit=cover removes Safari's left and right padding on the iPhone X in landscape, so the background color and images extend all the way to the edges
|
|
|
|
The user can still manually pinch-to-zoom if they want, since iOS always allows it, regardless of any properties in the meta tag that would otherwise disable it
|
|
But on Android, maximum-scale=1 and viewport-fit=cover prevent zooming entirely
|
|
# The result is some awkward situations for screen design, like constraining websites to a “safe area” and having white bars on the edges. It’s not much of a trick to remove it though, a background-color on the body will do. Or, expand the website the whole area (notch be damned), you can add viewport-fit=cover to your meta viewport tag.
|
|
hat. Stephen Radford documents:
|
|
|
|
In order to handle any adjustment that may be required iOS 11’s version of Safari includes some constants that can be used when viewport-fit=cover is being used.
|
|
|
|
safe-area-inset-top
|
|
safe-area-inset-right
|
|
safe-area-inset-left
|
|
safe-area-inset-bottom
|
|
|
|
This can be added to margin, padding, or absolute position values such a top or left.
|
|
|
|
I added the following to the main container on the website.
|
|
|
|
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
|
|
|
|
(Update: when the iPhone X first came out, it used constant() instead of env(), but as of 11.2, constant() has been removed in favor of the standardized env()).
|
|
|
|
There is another awkward situation with the notch, the safe area, and fixed positioning. Darryl Pogue reports:
|
|
|
|
Where iOS 11 differs from earlier versions is that the webview content now respects the safe areas. This means that if you have a header bar that is a fixed position element with top: 0, it will initially render 20px below the top of the screen: aligned to the bottom of the status bar. As you scroll down, it will move up behind the status bar. As you scroll up, it will again fall down below the status bar (leaving an awkward gap where content shows through in the 20px gap).
|
|
|
|
Fortunately also an easy fix, as the viewport-fit=cover addition to the meta viewport tag fixes it.
|
|
|
|
If you’re going to cover that viewport, it’s likely you’ll have to get a little clever to avoid hidden content!
|
|
*/
|
|
function _meta_viewport($fit='cover',$width='device-width',$user_scaleable=true)
|
|
{
|
|
return "width=${width},initial-scale=1.0,viewport-fit=${fit}";
|
|
}
|
|
|
|
?>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="<?= _meta_viewport() ?>">
|
|
<?php include 'lib/ico.apple.php'; ?>
|
|
<link rel="icon" type="image/png" sizes="192x192" href="<?= __ICO__ ?>/android-icon-192x192.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="<?= __ICO__ ?>/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="96x96" href="<?= __ICO__ ?>/favicon-96x96.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="<?= __ICO__ ?>/favicon-16x16.png">
|
|
<link rel="manifest" href="<?= __META__ ?>/site.webmanifest.php">
|
|
|
|
<?php include 'lib/ico.microsoft.php'; ?>
|
|
<?php include 'lib/ico.legacy.php'; ?>
|
|
|
|
<?php
|
|
# https://developers.google.com/search/docs/crawling-indexing/special-tagso
|
|
#
|
|
# notranslate - This meta tag tells Google that you don't want us to provide
|
|
# a translation for this page.
|
|
# nopagereadaloud - Prevents various Google text-to-speech services from reading
|
|
# aloud web pages using text-to-speech
|
|
# nositelinkssearchbox - Google Search results sometimes display a search box
|
|
# specific to your site, along with other direct links to your site.
|
|
# This tag tells Google not to show the sitelinks search box
|
|
#
|
|
# <meta name="google" content="notranslate">
|
|
?>
|
|
|