రెస్పాన్సివ్ వెబ్ పేజ్ డిజైన్ - వీక్స్‌పోర్ట్
什么是视口？
视口（viewport）是用户在网页上的可见区域。
视口随设备而异，在移动电话上会比在计算机屏幕上更小。
在平板电脑和手机之前，网页仅设计为用于计算机屏幕，并且网页拥有静态设计和固定大小是很常见的。
ప్లాట్ఫారమ్ మరియు మొబైల్ పరికరాలను ఉపయోగించడం ప్రారంభించే ముందు, వెబ్ పేజీలు మాత్రమే కంప్యూటర్ స్క్రీన్లకు రూపొందించబడ్డాయి. వెబ్ పేజీలు స్థాయీరు రూపకల్పన మరియు పరిమాణం ఉన్నాయి. ఈ ప్రశ్నను పరిష్కరించడానికి, ఈ పరికరాలపై బ్రౌజర్లు మొత్తం వెబ్ పేజీని ప్రపంచానికి ప్రపంచం చేయడం ద్వారా స్క్రీన్ పరిమాణానికి సరిపోల్చుతాయి.
ఇది పరిపూర్ణమైనది కాదు! ఒక శీఘ్ర కృత్రిమ చర్య.
వీక్షణ స్థలాన్ని సెట్ చేయండి
HTML5 వెబ్ డిజైనర్లకు వీక్షణ స్థలాన్ని సెట్ చేయడానికి ఒక పద్ధతిని ప్రవేశపెట్టింది <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%。另外，要小心使用较大的绝对定位值，这可能会导致元素滑落到小型设备的视口之外。
