ಸ್ಮಾರ್ಟ್‌ಫೋನ್ ಗಾತ್ರಕ್ಕೆ HTML ಬದಲಾವಣೆ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ಗೆ ಸಂಬಂಧಿಸಿದ ಮುಖ್ಯ ಸಮಸ್ಯೆಯೆಂದರೆ ಅದು ವೆಬ್‌ಸೈಟ್ ಪ್ರತಿಕ್ರಿಯಿಸದ ಅಥವಾ ತಪ್ಪಾಗಿ ಪ್ರದರ್ಶಿಸಲು ಕಾರಣವಾಗಬಹುದು. ಏಕೆಂದರೆ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಅನ್ನು ಬದಲಾಯಿಸಿದಾಗ, ಸಣ್ಣ ಪರದೆಯ ಗಾತ್ರಕ್ಕಾಗಿ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಆಪ್ಟಿಮೈಸ್ ಮಾಡದಿರಬಹುದು ಮತ್ತು ಅದರ ವಿಷಯವನ್ನು ಸರಿಯಾಗಿ ಅಳೆಯಲು ಸಾಧ್ಯವಾಗದಿರಬಹುದು. ಹೆಚ್ಚುವರಿಯಾಗಿ, ನ್ಯಾವಿಗೇಷನ್ ಮೆನುಗಳು ಅಥವಾ ಸಂವಾದಾತ್ಮಕ ಅಂಶಗಳಂತಹ ಸಣ್ಣ ಪರದೆಯ ಗಾತ್ರದಲ್ಲಿ ಕೆಲವು ವೈಶಿಷ್ಟ್ಯಗಳು ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸದಿರಬಹುದು.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. ಕೋಡ್‌ನ ಈ ಸಾಲು ಮೆಟಾ ಟ್ಯಾಗ್ ಆಗಿದೆ, ಇದು ಬ್ರೌಸರ್‌ಗೆ HTML ಡಾಕ್ಯುಮೆಂಟ್ ಬಗ್ಗೆ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ.
2. ಹೆಸರಿನ ಗುಣಲಕ್ಷಣವನ್ನು "ವೀಕ್ಷಣೆ ಪೋರ್ಟ್" ಗೆ ಹೊಂದಿಸಲಾಗಿದೆ, ಇದು ಈ ಟ್ಯಾಗ್ ವಿವಿಧ ಸಾಧನಗಳಲ್ಲಿ ಪುಟವನ್ನು ಹೇಗೆ ಪ್ರದರ್ಶಿಸಬೇಕು ಎಂಬುದರ ಕುರಿತು ಮಾಹಿತಿಯನ್ನು ಹೊಂದಿದೆ ಎಂದು ಬ್ರೌಸರ್‌ಗೆ ಹೇಳುತ್ತದೆ.
3. ವಿಷಯ ಗುಣಲಕ್ಷಣವನ್ನು "ಅಗಲ=ಸಾಧನ-ಅಗಲ, ಆರಂಭಿಕ-ಮಾಪಕ=1.0" ಗೆ ಹೊಂದಿಸಲಾಗಿದೆ, ಇದು ಬ್ರೌಸರ್‌ಗೆ ಅದು ಸಾಧನದ ಅಗಲವನ್ನು ಪುಟದ ಅಗಲವಾಗಿ ಬಳಸಬೇಕು ಮತ್ತು ಅಗತ್ಯವಿದ್ದರೆ ಅಲ್ಲಿಂದ ಮೇಲಕ್ಕೆ ಅಥವಾ ಕೆಳಕ್ಕೆ ಅಳೆಯಬೇಕು ಎಂದು ಹೇಳುತ್ತದೆ.
ರೆಸ್ಪಾನ್ಸಿವ್ ವೆಬ್ ವಿನ್ಯಾಸ
ರೆಸ್ಪಾನ್ಸಿವ್ ವೆಬ್ ವಿನ್ಯಾಸವು ವೆಬ್ ವಿನ್ಯಾಸಕ್ಕೆ ಒಂದು ವಿಧಾನವಾಗಿದ್ದು ಅದು ವೆಬ್ ಪುಟಗಳನ್ನು ವಿವಿಧ ಸಾಧನಗಳು ಮತ್ತು ವಿಂಡೋ ಅಥವಾ ಪರದೆಯ ಗಾತ್ರಗಳಲ್ಲಿ ಉತ್ತಮವಾಗಿ ನಿರೂಪಿಸುವಂತೆ ಮಾಡುತ್ತದೆ. ಇದು ಹೊಂದಿಕೊಳ್ಳುವ ಗ್ರಿಡ್‌ಗಳು ಮತ್ತು ಲೇಔಟ್‌ಗಳು, ಚಿತ್ರಗಳು ಮತ್ತು CSS ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳ ಬುದ್ಧಿವಂತ ಬಳಕೆಯನ್ನು ಬಳಸುತ್ತದೆ. ರೆಸ್ಪಾನ್ಸಿವ್ ವೆಬ್‌ಸೈಟ್‌ಗಳು ಅತ್ಯುತ್ತಮವಾದ ವೀಕ್ಷಣಾ ಅನುಭವವನ್ನು ಒದಗಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ-ಸುಲಭವಾದ ಓದುವಿಕೆ ಮತ್ತು ಕನಿಷ್ಠ ಮರುಗಾತ್ರಗೊಳಿಸುವಿಕೆ, ಪ್ಯಾನಿಂಗ್ ಮತ್ತು ಸ್ಕ್ರೋಲಿಂಗ್‌ನೊಂದಿಗೆ ನ್ಯಾವಿಗೇಷನ್-ವಿಶಾಲ ಶ್ರೇಣಿಯ ಸಾಧನಗಳಲ್ಲಿ (ಡೆಸ್ಕ್‌ಟಾಪ್ ಕಂಪ್ಯೂಟರ್ ಮಾನಿಟರ್‌ಗಳಿಂದ ಮೊಬೈಲ್ ಫೋನ್‌ಗಳವರೆಗೆ).
HTML ನಲ್ಲಿ, ಈ ಕೆಳಗಿನ ತಂತ್ರಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಸ್ಪಂದಿಸುವ ವಿನ್ಯಾಸವನ್ನು ಸಾಧಿಸಬಹುದು:
• ಹೊಂದಿಕೊಳ್ಳುವ ಗ್ರಿಡ್‌ಗಳು - ಲೇಔಟ್ ಅಂಶಗಳಿಗಾಗಿ ಪಿಕ್ಸೆಲ್‌ಗಳಂತಹ ಸ್ಥಿರ-ಅಗಲ ಯೂನಿಟ್‌ಗಳ ಬದಲಿಗೆ ಶೇಕಡಾವಾರು ಅಥವಾ ಇಎಮ್‌ಗಳಂತಹ ಸಾಪೇಕ್ಷ ಘಟಕಗಳನ್ನು ಬಳಸುವುದರಿಂದ ಪುಟವು ವಿಭಿನ್ನ ಪರದೆಯ ಗಾತ್ರಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳಲು ಅನುಮತಿಸುತ್ತದೆ.
• ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳು - CSS3 ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳು ಡೆವಲಪರ್‌ಗಳಿಗೆ ವಿಭಿನ್ನ ಸಾಧನದ ಅಗಲಗಳಿಗಾಗಿ ವಿಭಿನ್ನ ಶೈಲಿಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಬಳಸುತ್ತಿರುವ ಸಾಧನವನ್ನು ಅವಲಂಬಿಸಿ ಪುಟದ ವಿನ್ಯಾಸವನ್ನು ಸರಿಹೊಂದಿಸಲು ಇದು ಅನುಮತಿಸುತ್ತದೆ.
• ರೆಸ್ಪಾನ್ಸಿವ್ ಚಿತ್ರಗಳು - HTML5 ನಲ್ಲಿನ srcset ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿಕೊಂಡು ಚಿತ್ರಗಳನ್ನು ಸ್ಪಂದಿಸುವಂತೆ ಮಾಡಬಹುದು ಇದು ಡೆವಲಪರ್‌ಗಳು ವಿಭಿನ್ನ ಸಾಧನಗಳಿಗೆ ವಿಭಿನ್ನ ರೆಸಲ್ಯೂಶನ್‌ಗಳಲ್ಲಿ ಚಿತ್ರದ ಬಹು ಆವೃತ್ತಿಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.
• ಹೊಂದಿಕೊಳ್ಳುವ ವೀಡಿಯೊಗಳು - CSS ನಲ್ಲಿ ಆಬ್ಜೆಕ್ಟ್-ಫಿಟ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸುವ ಮೂಲಕ ವೀಡಿಯೊಗಳನ್ನು ಸ್ಪಂದಿಸುವಂತೆ ಮಾಡಬಹುದು, ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಅವುಗಳ ಗಾತ್ರವನ್ನು ಅವಲಂಬಿಸಿ ತಮ್ಮ ಕಂಟೈನರ್‌ಗಳಲ್ಲಿ ಹೇಗೆ ಅಳೆಯಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.
ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಮೆಟಾ ಟ್ಯಾಗ್
ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಮೆಟಾ ಟ್ಯಾಗ್ ಒಂದು HTML ಅಂಶವಾಗಿದ್ದು ಅದು ಬಳಸುತ್ತಿರುವ ಸಾಧನಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ ಪುಟದ ಆಯಾಮಗಳು ಮತ್ತು ಸ್ಕೇಲಿಂಗ್ ಅನ್ನು ಹೇಗೆ ಹೊಂದಿಸುವುದು ಎಂಬುದನ್ನು ಬ್ರೌಸರ್‌ಗೆ ತಿಳಿಸುತ್ತದೆ. ಸ್ಮಾರ್ಟ್‌ಫೋನ್‌ಗಳು ಮತ್ತು ಟ್ಯಾಬ್ಲೆಟ್‌ಗಳಂತಹ ವಿವಿಧ ಸಾಧನಗಳಲ್ಲಿ ವೆಬ್ ಪುಟವು ಹೇಗೆ ಕಾಣುತ್ತದೆ ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸಲು ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ವ್ಯೂಪೋರ್ಟ್ ಮೆಟಾ ಟ್ಯಾಗ್ ಅನ್ನು ವೆಬ್ ಪುಟದ ಅಗಲವನ್ನು ಹೊಂದಿಸಲು, ಅದನ್ನು ಮೇಲಕ್ಕೆ ಅಥವಾ ಕೆಳಕ್ಕೆ ಅಳೆಯಲು ಮತ್ತು ಬಳಕೆದಾರರಿಗೆ ಜೂಮ್ ಇನ್ ಅಥವಾ ಔಟ್ ಮಾಡಲು ಅನುಮತಿಸಲಾಗಿದೆಯೇ ಅಥವಾ ಇಲ್ಲವೇ ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ಬಳಸಬಹುದು. ಆರಂಭಿಕ ಸ್ಕೇಲ್, ಗರಿಷ್ಠ-ಸ್ಕೇಲ್, ಬಳಕೆದಾರ-ಸ್ಕೇಲೆಬಲ್ ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಹೊಂದಿಸಲು ಸಹ ಇದನ್ನು ಬಳಸಬಹುದು.
ನನ್ನ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ನನ್ನ ಫೋನ್ ಪರದೆಗೆ ಹೊಂದುವಂತೆ ಮಾಡುವುದು ಹೇಗೆ
HTML ನಲ್ಲಿ ಫೋನ್ ಪರದೆಯನ್ನು ಹೊಂದಿಸಲು ವೆಬ್‌ಸೈಟ್ ಮಾಡಲು, ನೀವು ವ್ಯೂಪೋರ್ಟ್ ಮೆಟಾ ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸಬಹುದು. ವಿಭಿನ್ನ ಸಾಧನಗಳಲ್ಲಿ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಹೇಗೆ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸಲು ಈ ಟ್ಯಾಗ್ ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ನೀವು ವ್ಯೂಪೋರ್ಟ್‌ನ ಅಗಲವನ್ನು ಸಾಧನದ ಅಗಲಕ್ಕೆ ಸಮನಾಗಿ ಹೊಂದಿಸಬಹುದು, ಇದರಿಂದಾಗಿ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಯಾವುದೇ ಸಾಧನದ ಪರದೆಗೆ ಸರಿಹೊಂದುವಂತೆ ಅದರ ಗಾತ್ರವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸರಿಹೊಂದಿಸುತ್ತದೆ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ವಿವಿಧ ಸಾಧನಗಳಲ್ಲಿ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಹೇಗೆ ಕಾಣುತ್ತದೆ ಎಂಬುದನ್ನು ಇನ್ನಷ್ಟು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ನಿಮ್ಮ CSS ಕೋಡ್‌ನಲ್ಲಿ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಸಹ ನೀವು ಬಳಸಬಹುದು.
