ریسپانسیو ویب پیج ڈیزائن - ویجت

什么是视口？

视口（viewport）是用户在网页上的可见区域。

视口随设备而异，在移动电话上会比在计算机屏幕上更小。

ਪੈਡ ਕਮਪਿਊਟਰ ਅਤੇ ਮੋਬਾਇਲ ਤੋਂ ਪਹਿਲਾਂ ਵੈੱਬਸਾਈਟਾਂ ਕੇਵਲ ਕੰਪਿਊਟਰ ਸਕਰੀਨ ਲਈ ਡਿਜ਼ਾਇਨ ਕੀਤੀਆਂ ਗਈਆਂ ਸਨ ਅਤੇ ਸਟੈਟਿਕ ਨਿਰਮਾਣ ਅਤੇ ਸਥਿਰ ਮਾਪ ਬਹੁਤ ਆਮ ਸਨ。

ਤਦ ਜਦੋਂ ਅਸੀਂ ਪੈਡ ਕਮਪਿਊਟਰ ਅਤੇ ਮੋਬਾਇਲ ਉੱਤੇ ਇੰਟਰਨੈੱਟ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰਦੇ ਹਾਂ ਤਾਂ ਸਥਿਰ ਮਾਪ ਦੀਆਂ ਵੈੱਬਸਾਈਟਾਂ ਬਹੁਤ ਵੱਡੀਆਂ ਹੁੰਦੀਆਂ ਹਨ ਅਤੇ ਉਹ ਵਿਜੂਅਲ ਪੋਰਟ ਨੂੰ ਸਮਾਯੋਜਿਤ ਨਹੀਂ ਕਰ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ ਇਹ ਉਪਕਰਣਾਂ 'ਤੇ ਬਰਾਊਜ਼ਰ ਪੂਰੀ ਵੈੱਬਸਾਈਟ ਨੂੰ ਪ੍ਰੋਪੋਰਸ਼ਨਲ ਤੌਰ 'ਤੇ ਛੂਟ ਦਿੰਦੇ ਹਨ ਤਾਂ ਕਿ ਉਹ ਸਕਰੀਨ ਦੇ ਮਾਪ ਨੂੰ ਸਮਾਯੋਜਿਤ ਕਰ ਸਕਣ।

ਇਹ ਪੂਰਾ ਨਹੀਂ ਹੈ! ਇਹ ਇੱਕ ਤੁਲਨਾਤਮਕ ਤੇਜ਼ ਸਰਕਟ ਹੈ。

ਸੈਟ ਕਰਨ

HTML5 ਨੇ ਇੱਕ ਤਰੀਕਾ ਦੇਣਾ ਸ਼ੁਰੂ ਕੀਤਾ ਹੈ ਜਿਸ ਨਾਲ Web ਡਿਜ਼ਾਇਨਰ ਵਿਜੂਅਲ ਪੋਰਟ ਨੂੰ ਸੈਟ ਕਰ ਸਕਦੇ ਹਨ <meta> ਟੈਗ ਨੂੰ ਵਿਜੂਅਲ ਪੋਰਟ ਨੂੰ ਕੰਟਰੋਲ ਕਰਨ ਲਈ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ。

ਤੁਸੀਂ ਸਾਰੇ ਵੈੱਬਸਾਈਟਾਂ ਵਿੱਚ ਹੇਠ ਲਿਖੇ <meta> ਵਿਜੂਅਲ ਪੋਰਟ ਏਲੀਮੈਂਟ:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ਇਹ ਬਰਾਊਜ਼ਰ ਨੂੰ ਪੰਨੇ ਦੇ ਮਾਪ ਅਤੇ ਸਕੇਲਿੰਗ ਪ੍ਰੋਫਾਇਲ ਨੂੰ ਕਿਵੇਂ ਕੰਟਰੋਲ ਕਰਨਾ ਹੈ ਦੇ ਬਾਰੇ ਸੂਚਨਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ。

width=device-width ਕੁਝ ਪੰਨੇ ਦੀ ਚੌਡਾਈ ਨੂੰ ਉਪਕਰਣ ਦੀ ਸਕਰੀਨ ਦੀ ਚੌਡਾਈ ਨਾਲ ਸਮਾਨ ਕਰ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ (ਉਪਕਰਣ ਨਾਲ ਨਿਰਭਰ ਹੈ)。

ਜਦੋਂ ਬਰਾਊਜ਼ਰ ਪਹਿਲੀ ਵਾਰ ਪੰਨਾ ਲੋਡ ਕਰਦਾ ਹੈ ਤਾਂinitial-scale=1.0 ਕੁਝ ਸੈਟਿੰਗਾਂ ਨੂੰ ਮੁੱਢਲੇ ਜਾਂਚ ਪੱਧਰ ਨੂੰ ਸੈਟ ਕੀਤਾ ਗਿਆ ਹੈ。

ਹੇਠਾਂ ਇਹ ਮਾਮਲੇ ਹਨ ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਵਿਜੂਅਲ ਪੋਰਟ ਮੇਟਾ ਟੈਗ ਦੇ ਬਿਨਾ ਵੈੱਬਸਾਈਟ ਅਤੇ ਵਿਜੂਅਲ ਪੋਰਟ ਮੇਟਾ ਟੈਗ ਨਾਲ ਵੈੱਬਸਾਈਟ ਦੇ ਉਦਾਹਰਣ ਹਨ:

ਸੁਝਾਅ:ਜੇਕਰ ਤੁਸੀਂ ਮੋਬਾਇਲ ਜਾਂ ਪੈਡ ਕਮਪਿਊਟਰ ਉੱਤੇ ਇਹ ਪੰਨਾ ਦੇਖ ਰਹੇ ਹੋ ਤਾਂ ਹੇਠਾਂ ਦੋ ਲਿੰਕਾਂ 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ ਵੱਖੋ-ਵੱਖੋ ਦੇਖ ਸਕਦੇ ਹੋ



ਵਿਜੂਅਲ ਪੋਰਟ ਮੇਟਾ ਟੈਗ ਦੇ ਬਿਨਾ


ਵਿਜੂਅਲ ਪੋਰਟ ਮੇਟਾ ਟੈਗ ਨਾਲ

ਸਮੱਗਰੀ ਨੂੰ ਵਿਜੂਅਲ ਪੋਰਟ ਦੇ ਮੋਟਾਬਕ ਮਾਪ ਨੂੰ ਰੱਖੇ ਜਾਣਾ

ਉਪਭੋਗਤਾ ਟਾਇਪੀਡੇਕਟ ਅਤੇ ਮੋਬਾਇਲ ਉਪਕਰਣਾਂ 'ਤੇ ਵੈੱਬਸਾਈਟ ਨੂੰ ਉੱਥੇ ਸਕਰੋਲ ਕਰਨ ਦੀ ਆਦਤ ਹੈ ਨਹੀਂ ਕਿ ਹੌਰਜ਼ਾਰੇ ਵਿੱਚ ਸਕਰੋਲ ਕਰਨ!

ਇਸ ਲਈ ਜੇਕਰ ਮਜ਼ਬੂਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਕਿ ਉਸਰੇ ਵਿਡਜ਼ੇਨਲ ਸਕਰੋਲ ਜਾਂ ਸਮਾਪਤ ਕਰਕੇ ਪੂਰੀ ਵੈੱਬਸਾਈਟ ਦੇਖੇ ਜਾਵੇ ਤਾਂ ਇਹ ਖਰਾਬ ਯੂਜ਼ਰ ਐਕਸਪੀਰੀਐਂਸ ਪ੍ਰਦਾਨ ਕਰੇਗਾ。

ਹੋਰ ਲੋੜੀਦੇ ਸਮਾਨ ਨਿਯਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰਨੀ ਹੈ:

1. 请勿使用较大的固定宽度元素 - 例如，如果图像的宽度大于视口的宽度，则可能导致视口水平滚动。请务必调整此内容以适合视口的宽度。

2. 不要让内容依赖于特定的视口宽度来呈现好的效果 - 由于以 CSS 像素计的屏幕尺寸和宽度在设备之间变化很大，因此内容不应依赖于特定的视口宽度来呈现良好的效果。

3. 使用 CSS 媒体查询为小屏幕和大屏幕应用不同的样式 - 为页面元素设置较大的 CSS 绝对宽度将导致该元素对于较小设备上的视口太宽。而是应该考虑使用相对宽度值，例如 width: 100%。另外，要小心使用较大的绝对定位值，这可能会导致元素滑落到小型设备的视口之外。