ਵੈੱਬਸਾਈਟ ਨੂੰ ਮੋਬਾਈਲ ਰਿਸਪੌਂਸਿਵ ਕਿਵੇਂ ਬਣਾਈਏ

ਵੈੱਬਸਾਈਟ ਨੂੰ ਮੋਬਾਈਲ ਰਿਸਪੌਂਸਿਵ ਬਣਾਉਣ ਲਈ, ਵਿਊਪੋਰਟ ਮੈਟਾ ਟੈਗ ਜੋੜੋ, ਲੇਆਉਟ ਨੂੰ ਮੋਬਾਈਲ-ਪਹਿਲਾਂ ਲਚਕੀਲੀਆਂ ਚੌੜਾਈਆਂ ਨਾਲ ਬਣਾਓ, ਅਤੇ ਵੱਡੀਆਂ ਸਕ੍ਰੀਨਾਂ 'ਤੇ CSS ਬ੍ਰੇਕਪੌਇੰਟਾਂ ਨਾਲ ਉਸਨੂੰ ਮੁੜ ਵਿਵਸਥਿਤ ਕਰੋ — ਕਾਲਮ ਇੱਕ ਹੇਠਾਂ ਇੱਕ ਲਾਉਣਾ, ਮੀਨੂ ਸਮੇਟਣਾ ਅਤੇ ਤਸਵੀਰਾਂ ਨੂੰ ਫਿੱਟ ਕਰਨਾ। ਫਿਰ ਹਰ ਪੇਜ ਨੂੰ ਫੋਨ ਦੀ ਚੌੜਾਈ 'ਤੇ ਜਾਂਚੋ: ਪਾਸੇ ਵੱਲ ਸਕ੍ਰੌਲ, ਬਹੁਤ ਛੋਟਾ ਟੈਕਸਟ, ਅਤੇ ਟੈਪ ਕਰਨ ਲਈ ਬਹੁਤ ਛੋਟੇ ਬਟਨ। AI ਨਾਲ ਬਣੀ ਸਾਈਟ 'ਤੇ ਇੱਕ ਸਾਫ਼ ਪ੍ਰੋਂਪਟ ਅਤੇ ਫੋਨ-ਆਕਾਰ ਦੇ ਪ੍ਰੀਵਿਊ ਵਿੱਚ ਇੱਕ ਝਾਤ ਆਮ ਤੌਰ 'ਤੇ ਜ਼ਿਆਦਾਤਰ ਸਮੱਸਿਆਵਾਂ ਠੀਕ ਕਰ ਦਿੰਦੀ ਹੈ।

ਰਿਸਪੌਂਸਿਵ ਡਿਜ਼ਾਈਨ ਅਸਲ ਵਿੱਚ ਕੀ ਹੈ

ਇੱਕ ਰਿਸਪੌਂਸਿਵ ਸਾਈਟ ਪੇਜਾਂ ਅਤੇ URL ਦਾ ਇੱਕੋ ਸੈੱਟ ਵਰਤਦੀ ਹੈ ਜੋ ਸਕ੍ਰੀਨ ਮੁਤਾਬਕ ਢਲਦਾ ਹੈ। ਵੱਖਰੀ "m." ਸਾਈਟ ਦੀ ਥਾਂ, CSS ਕੁਝ ਖਾਸ ਚੌੜਾਈਆਂ 'ਤੇ ਲੇਆਉਟ ਬਦਲਦਾ ਹੈ, ਜਿਨ੍ਹਾਂ ਨੂੰ ਬ੍ਰੇਕਪੌਇੰਟ ਕਿਹਾ ਜਾਂਦਾ ਹੈ। ਇਸਦੇ ਮੁੱਖ ਹਿੱਸੇ:

• ਵਿਊਪੋਰਟ ਮੈਟਾ ਟੈਗ ਮੋਬਾਈਲ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਡਿਵਾਈਸ ਦੀ ਅਸਲ ਚੌੜਾਈ ਵਰਤਣ ਲਈ ਕਹਿੰਦਾ ਹੈ।
• ਲਚਕੀਲੇ ਲੇਆਉਟ ਪ੍ਰਤੀਸ਼ਤ, flexbox ਅਤੇ grid ਵਰਤਦੇ ਹਨ, ਨਾ ਕਿ ਸਥਿਰ ਪਿਕਸਲ ਚੌੜਾਈਆਂ।
• ਮੀਡੀਆ ਕਵੇਰੀਆਂ (ਜਾਂ Tailwind ਦੀਆਂ md: ਵਰਗੀਆਂ ਕਲਾਸਾਂ) ਕਿਸੇ ਦਿੱਤੀ ਚੌੜਾਈ ਤੋਂ ਉੱਪਰ ਲੇਆਉਟ ਬਦਲਦੀਆਂ ਹਨ।
• ਲਚਕੀਲਾ ਮੀਡੀਆ — ਤਸਵੀਰਾਂ ਅਤੇ ਵੀਡੀਓ ਜੋ ਆਪਣੇ ਕੰਟੇਨਰ ਵਿੱਚ ਫਿੱਟ ਹੋਣ ਲਈ ਸੁੰਗੜਦੇ ਹਨ।

ਇਹ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ ਕਿਉਂਕਿ ਤੁਹਾਡੀ ਬਹੁਤੀ ਆਵਾਜਾਈ ਫੋਨਾਂ ਤੋਂ ਹੋ ਸਕਦੀ ਹੈ, ਅਤੇ ਗੂਗਲ ਤੁਹਾਡੇ ਪੇਜਾਂ ਦਾ ਮੋਬਾਈਲ ਵਰਜਨ ਇੰਡੈਕਸ ਕਰਦਾ ਹੈ। ਜੇ ਸਮੱਗਰੀ ਜਾਂ ਲਿੰਕ ਸਿਰਫ਼ ਡੈਸਕਟਾਪ 'ਤੇ ਹਨ, ਤਾਂ ਗੂਗਲ ਨੂੰ ਵੀ ਉਹ ਨਹੀਂ ਦਿਸ ਸਕਦੇ।

ਵਿਕਲਪ ਅਤੇ ਸਮਝੌਤੇ

ਮੋਬਾਈਲ-ਪਹਿਲਾਂ ਆਮ ਤੌਰ 'ਤੇ ਸਰਲ ਹੁੰਦਾ ਹੈ: ਇੱਕ ਕਾਲਮ ਸਭ ਤੋਂ ਆਸਾਨ ਲੇਆਉਟ ਹੈ, ਅਤੇ ਜਗ੍ਹਾ ਵਧਣ 'ਤੇ ਕਾਲਮ ਜੋੜਨਾ ਉਨ੍ਹਾਂ ਨੂੰ ਹਟਾਉਣ ਨਾਲੋਂ ਘੱਟ ਕੰਮ ਹੈ।

ਉਹ ਹਿੱਸੇ ਜੋ ਆਮ ਤੌਰ 'ਤੇ ਟੁੱਟਦੇ ਹਨ

ਵਿਊਪੋਰਟ ਟੈਗ

ਜੇ ਫੋਨ 'ਤੇ ਪੇਜ ਛੋਟੀ ਡੈਸਕਟਾਪ ਸਾਈਟ ਵਾਂਗ ਦਿਖਦਾ ਹੈ, ਤਾਂ ਵਿਊਪੋਰਟ ਟੈਗ ਗਾਇਬ ਹੈ:

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

maximum-scale=1 ਜਾਂ user-scalable=no ਨਾ ਜੋੜੋ। ਪਿੰਚ-ਜ਼ੂਮ ਰੋਕਣ ਨਾਲ ਘੱਟ ਨਜ਼ਰ ਵਾਲੇ ਲੋਕਾਂ ਲਈ ਸਾਈਟ ਵਰਤਣੀ ਔਖੀ ਹੋ ਜਾਂਦੀ ਹੈ।

ਸਥਿਰ ਚੌੜਾਈਆਂ ਅਤੇ ਪਾਸੇ ਵੱਲ ਸਕ੍ਰੌਲ

ਸਭ ਤੋਂ ਆਮ ਰਿਸਪੌਂਸਿਵ ਬੱਗ ਸਕ੍ਰੀਨ ਤੋਂ ਚੌੜੀ ਚੀਜ਼ ਹੈ: ਇੱਕ ਸਥਿਰ width: 1200px ਕੰਟੇਨਰ, ਚੌੜਾ ਟੇਬਲ, ਲੰਮਾ URL ਜਾਂ ਕੋਡ ਬਲਾਕ, ਜਾਂ max-width: 100% ਤੋਂ ਬਿਨਾਂ ਤਸਵੀਰ। ਫਿਰ ਪੂਰਾ ਪੇਜ ਪਾਸੇ ਵੱਲ ਸਕ੍ਰੌਲ ਹੁੰਦਾ ਹੈ। width ਦੀ ਥਾਂ max-width ਵਰਤੋ, ਟੈਕਸਟ ਨੂੰ ਲਪੇਟਣ ਦਿਓ, ਅਤੇ ਚੌੜੀਆਂ ਚੀਜ਼ਾਂ ਨੂੰ ਆਪਣਾ ਸਕ੍ਰੌਲ ਖੇਤਰ ਦਿਓ।

ਨੈਵੀਗੇਸ਼ਨ

ਡੈਸਕਟਾਪ ਦੇ ਪੰਜ ਮੀਨੂ ਲਿੰਕ ਫੋਨ 'ਤੇ ਘੱਟ ਹੀ ਫਿੱਟ ਹੁੰਦੇ ਹਨ। ਆਮ ਹੱਲ ਇੱਕ ਮੀਨੂ ਬਟਨ ਹੈ ਜੋ ਇੱਕ ਪੈਨਲ ਖੋਲ੍ਹਦਾ ਹੈ। ਦੋ ਜਾਂ ਤਿੰਨ ਸਭ ਤੋਂ ਜ਼ਰੂਰੀ ਕਾਰਵਾਈਆਂ — "ਬੁੱਕ", "ਕਾਰਟ", "ਸਾਈਨ ਇਨ" — ਦਿਖਦੀਆਂ ਰਹਿਣ, ਅਤੇ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਮੀਨੂ ਕੀਬੋਰਡ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ ਅਤੇ ਆਸਾਨੀ ਨਾਲ ਬੰਦ ਹੁੰਦਾ ਹੈ।

ਟੈਕਸਟ ਅਤੇ ਟੈਪ ਟਾਰਗੇਟ

• ਫੋਨਾਂ 'ਤੇ ਲਗਭਗ 16 px ਬਾਡੀ ਟੈਕਸਟ ਇੱਕ ਸਮਝਦਾਰ ਘੱਟੋ-ਘੱਟ ਹੈ। ਛੋਟੇ ਟੈਕਸਟ ਵਾਲੇ ਇਨਪੁੱਟ ਟੈਪ ਕਰਨ 'ਤੇ iPhone ਨੂੰ ਜ਼ੂਮ ਕਰਵਾਉਂਦੇ ਹਨ।
• ਬਟਨ ਅਤੇ ਲਿੰਕ ਆਸਾਨੀ ਨਾਲ ਦਬਾਉਣਯੋਗ ਬਣਾਓ। WCAG 2.2 AA ਘੱਟੋ-ਘੱਟ 24 ਗੁਣਾ 24 CSS ਪਿਕਸਲ (ਜਾਂ ਕਾਫ਼ੀ ਵਿੱਥ) ਤੈਅ ਕਰਦਾ ਹੈ; ਲਗਭਗ 44 ਪਿਕਸਲ ਅੰਗੂਠਿਆਂ ਲਈ ਵਧੇਰੇ ਆਰਾਮਦਾਇਕ ਹੈ।
• ਨਾਲ-ਨਾਲ ਦੇ ਲਿੰਕਾਂ ਵਿਚਕਾਰ ਵਿੱਥ ਛੱਡੋ ਤਾਂ ਜੋ ਲੋਕ ਗਲਤ ਲਿੰਕ 'ਤੇ ਨਾ ਦਬਾਉਣ।

ਟੇਬਲ ਅਤੇ ਡੇਟਾ

ਚੌੜੇ ਟੇਬਲ ਰਿਸਪੌਂਸਿਵ ਐਪ ਦਾ ਸਭ ਤੋਂ ਔਖਾ ਹਿੱਸਾ ਹਨ। ਵਿਕਲਪ, ਪਸੰਦ ਦੇ ਕ੍ਰਮ ਵਿੱਚ: ਫੋਨਾਂ 'ਤੇ ਘੱਟ ਕਾਲਮ ਦਿਖਾਓ, ਹਰ ਕਤਾਰ ਨੂੰ ਕਾਰਡ ਬਣਾਓ, ਜਾਂ ਟੇਬਲ ਨੂੰ ਖਿਤਿਜੀ ਸਕ੍ਰੌਲ ਹੋਣ ਵਾਲੇ ਕੰਟੇਨਰ ਵਿੱਚ ਪਾਓ ਜਿਸਦਾ ਪਹਿਲਾ ਕਾਲਮ ਟਿਕਿਆ ਹੋਵੇ। ਚੋਣ ਇਸ ਅਧਾਰ 'ਤੇ ਕਰੋ ਕਿ ਲੋਕਾਂ ਨੂੰ ਕੀ ਤੁਲਨਾ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।

ਤਸਵੀਰਾਂ ਅਤੇ ਮੀਡੀਆ

max-width: 100% ਅਤੇ height: auto ਵਰਤੋ, ਛੋਟੀਆਂ ਸਕ੍ਰੀਨਾਂ ਨੂੰ srcset ਨਾਲ ਛੋਟੀਆਂ ਫਾਈਲਾਂ ਦਿਓ, ਅਤੇ ਲੇਆਉਟ ਦੀ ਛਾਲ ਤੋਂ ਬਚਣ ਲਈ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਸੈੱਟ ਕਰੋ। ਏਮਬੈੱਡ ਕੀਤੇ ਵੀਡੀਓ ਅਤੇ ਨਕਸ਼ਿਆਂ ਨੂੰ ਰਿਸਪੌਂਸਿਵ ਰੈਪਰ ਚਾਹੀਦਾ ਹੈ ਤਾਂ ਜੋ ਉਹ ਆਪਣਾ ਅਨੁਪਾਤ ਰੱਖਣ। ਛੋਟੀਆਂ ਤਸਵੀਰਾਂ ਪੇਜਾਂ ਨੂੰ ਤੇਜ਼ ਵੀ ਬਣਾਉਂਦੀਆਂ ਹਨ — ਦੇਖੋ ਆਪਣੀ ਵੈੱਬਸਾਈਟ ਨੂੰ ਤੇਜ਼ ਕਿਵੇਂ ਬਣਾਈਏ।

ਫਾਰਮ

ਲੇਬਲ ਫੀਲਡਾਂ ਦੇ ਉੱਪਰ ਰੱਖੋ, ਫੀਲਡਾਂ ਨੂੰ ਪੂਰੀ ਚੌੜਾਈ ਦਿਓ, ਅਤੇ ਸਹੀ ਇਨਪੁੱਟ ਕਿਸਮਾਂ ਵਰਤੋ (type="email", type="tel", inputmode="numeric") ਤਾਂ ਜੋ ਫੋਨ ਮਿਲਦਾ ਕੀਬੋਰਡ ਦਿਖਾਵੇ। ਸਬਮਿਟ ਬਟਨ ਉੱਥੇ ਰੱਖੋ ਜਿੱਥੇ ਅੰਗੂਠਾ ਪਹੁੰਚ ਸਕੇ, ਅਤੇ ਕੀਬੋਰਡ ਖੁੱਲ੍ਹਣ 'ਤੇ ਵੀ ਦਿਖਦਾ ਰਹੇ।

ਸਿਰਫ਼ ਹੋਵਰ ਵਾਲੀਆਂ ਕਾਰਵਾਈਆਂ

ਫੋਨਾਂ 'ਤੇ ਹੋਵਰ ਨਹੀਂ ਹੁੰਦਾ। ਟੂਲਟਿੱਪ, ਡ੍ਰਾਪਡਾਊਨ ਅਤੇ ਪ੍ਰੀਵਿਊ ਜੋ ਸਿਰਫ਼ ਹੋਵਰ 'ਤੇ ਦਿਖਦੇ ਹਨ, ਟੱਚ ਵਰਤੋਂਕਾਰਾਂ ਲਈ ਅਦਿੱਖ ਹਨ। ਉਨ੍ਹਾਂ ਨੂੰ ਟੈਪ 'ਤੇ ਵੀ ਕੰਮ ਕਰਵਾਓ।

ਕੰਮ ਕਰਨ ਵਾਲੇ ਪ੍ਰੋਂਪਟ

ਨਵੇਂ ਬਿਲਡ ਲਈ, ਸ਼ੁਰੂ ਵਿੱਚ ਹੀ ਕਹਿ ਦਿਓ:

ਇਸਨੂੰ ਮੋਬਾਈਲ-ਪਹਿਲਾਂ ਬਣਾਓ। ਫੋਨਾਂ 'ਤੇ ਇੱਕ ਕਾਲਮ, ਟੈਬਲੇਟ ਚੌੜਾਈ ਤੋਂ ਦੋ ਕਾਲਮ, ਡੈਸਕਟਾਪ 'ਤੇ ਪੂਰਾ ਲੇਆਉਟ। 320 px ਚੌੜਾਈ 'ਤੇ ਕੋਈ ਪਾਸੇ ਵੱਲ ਸਕ੍ਰੌਲ ਨਹੀਂ, ਬਾਡੀ ਟੈਕਸਟ ਘੱਟੋ-ਘੱਟ 16 px, ਟੈਪ ਟਾਰਗੇਟ ਘੱਟੋ-ਘੱਟ 44 px, ਛੋਟੀਆਂ ਸਕ੍ਰੀਨਾਂ 'ਤੇ ਮੀਨੂ ਬਟਨ, ਅਤੇ ਫੋਨਾਂ 'ਤੇ ਕਾਰਡ ਬਣਨ ਵਾਲੇ ਟੇਬਲ।

ਮੌਜੂਦਾ ਪੇਜ ਲਈ, ਜੋ ਦਿਸਦਾ ਹੈ ਉਹ ਵਰਣਨ ਕਰੋ:

ਫੋਨਾਂ 'ਤੇ /pricing ਪੇਜ ਪਾਸੇ ਵੱਲ ਸਕ੍ਰੌਲ ਹੁੰਦਾ ਹੈ ਅਤੇ ਤਿੰਨ ਪਲਾਨ ਕਾਰਡ ਨਾਲ-ਨਾਲ ਦਬੇ ਹੋਏ ਹਨ। 768 px ਤੋਂ ਹੇਠਾਂ ਕਾਰਡਾਂ ਨੂੰ ਉੱਪਰ ਤੋਂ ਹੇਠਾਂ ਲਗਾਓ, ਤੁਲਨਾ ਵਾਲੇ ਟੇਬਲ ਨੂੰ ਆਪਣੇ ਕੰਟੇਨਰ ਵਿੱਚ ਖਿਤਿਜੀ ਸਕ੍ਰੌਲ ਕਰਨ ਦਿਓ ਜਿਸਦਾ ਫੀਚਰ ਕਾਲਮ ਟਿਕਿਆ ਹੋਵੇ, ਅਤੇ ਡੈਸਕਟਾਪ ਲੇਆਉਟ ਨਾ ਬਦਲੋ।

ਹਰ ਪੇਜ ਨੂੰ 375 px ਚੌੜਾਈ 'ਤੇ ਜਾਂਚੋ। ਜੋ ਵੀ ਬਾਹਰ ਨਿਕਲਦਾ ਹੈ, ਓਵਰਲੈਪ ਕਰਦਾ ਹੈ, 16 px ਤੋਂ ਛੋਟਾ ਟੈਕਸਟ ਜਾਂ 44 px ਤੋਂ ਛੋਟੇ ਟੈਪ ਟਾਰਗੇਟ ਹਨ, ਜਾਂ ਸਿਰਫ਼ ਹੋਵਰ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ, ਉਸਦੀ ਸੂਚੀ ਬਣਾਓ, ਫਿਰ ਹਰ ਇੱਕ ਠੀਕ ਕਰੋ।

ਕਦਮ ਦਰ ਕਦਮ

1. ਪੇਜ ਹੈਡ ਵਿੱਚ ਵਿਊਪੋਰਟ ਟੈਗ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ।
2. 320–375 px ਚੌੜਾਈ 'ਤੇ ਟੈਸਟ ਕਰੋ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਵਾਈਸ ਮੋਡ ਜਾਂ ਫੋਨ-ਆਕਾਰ ਦੇ ਪ੍ਰੀਵਿਊ ਵਿੱਚ। ਹਰ ਪੇਜ ਉੱਪਰ ਤੋਂ ਹੇਠਾਂ ਤੱਕ ਸਕ੍ਰੌਲ ਕਰੋ।
3. ਪਹਿਲਾਂ ਪਾਸੇ ਵੱਲ ਸਕ੍ਰੌਲ ਠੀਕ ਕਰੋ। ਉਹ ਤੱਤ ਲੱਭੋ ਜੋ ਬਹੁਤ ਚੌੜਾ ਹੈ; ਉਸਦੇ ਜਾਣ ਤੱਕ ਹੋਰ ਕੁਝ ਵੀ ਪਰਖਣਾ ਔਖਾ ਹੈ।
4. ਨੈਵੀਗੇਸ਼ਨ ਸੁਲਝਾਓ: ਮੀਨੂ ਬਟਨ, ਮੁੱਖ ਕਾਰਵਾਈਆਂ ਦਿਖਦੀਆਂ ਰਹਿਣ।
5. ਹਰ ਮੁੱਖ ਫਲੋ 'ਤੇ ਟੈਕਸਟ, ਟੈਪ ਟਾਰਗੇਟ ਅਤੇ ਫਾਰਮ ਜਾਂਚੋ — ਸਾਈਨ ਅੱਪ, ਖੋਜ, ਚੈੱਕਆਊਟ, ਸੰਪਰਕ।
6. ਟੇਬਲ ਅਤੇ ਮੀਡੀਆ ਸੰਭਾਲੋ: ਕਾਰਡ ਜਾਂ ਸਕ੍ਰੌਲ ਕੰਟੇਨਰ, ਰਿਸਪੌਂਸਿਵ ਤਸਵੀਰਾਂ ਅਤੇ ਏਮਬੈੱਡ।
7. ਵਿਚਕਾਰਲੇ ਆਕਾਰ ਜਾਂਚੋ। ਚੌੜਾਈ ਨੂੰ ਹੌਲੀ-ਹੌਲੀ ਫੋਨ ਤੋਂ ਡੈਸਕਟਾਪ ਤੱਕ ਖਿੱਚੋ; ਲੇਆਉਟ ਅਕਸਰ ਟੈਬਲੇਟ ਚੌੜਾਈ ਦੇ ਆਸਪਾਸ ਟੁੱਟਦੇ ਹਨ।
8. ਅਸਲ ਫੋਨ 'ਤੇ ਟੈਸਟ ਕਰੋ। ਐਮੂਲੇਟਰ ਉਹ ਚੀਜ਼ਾਂ ਖੁੰਝਾ ਦਿੰਦੇ ਹਨ ਜਿਵੇਂ ਸਕ੍ਰੀਨ ਕੀਬੋਰਡ ਦਾ ਬਟਨ ਢਕਣਾ, ਨੌਚ, ਅਤੇ ਮੋਬਾਈਲ ਡੇਟਾ 'ਤੇ ਸਾਈਟ ਕਿੰਨੀ ਤੇਜ਼ ਮਹਿਸੂਸ ਹੁੰਦੀ ਹੈ।

ਆਮ ਗਲਤੀਆਂ

• ਸਿਰਫ਼ ਇੱਕ ਫੋਨ ਆਕਾਰ 'ਤੇ ਟੈਸਟ ਕਰਨਾ। ਇੱਕ ਛੋਟਾ ਫੋਨ, ਇੱਕ ਵੱਡਾ ਫੋਨ ਅਤੇ ਇੱਕ ਟੈਬਲੇਟ ਜਾਂਚੋ।
• ਫਿੱਟ ਕਰਨ ਲਈ ਮੋਬਾਈਲ 'ਤੇ ਸਮੱਗਰੀ ਲੁਕਾਉਣਾ। ਗੂਗਲ ਮੋਬਾਈਲ ਵਰਜਨ ਇੰਡੈਕਸ ਕਰਦਾ ਹੈ, ਅਤੇ ਫੋਨ ਵਰਤੋਂਕਾਰਾਂ ਨੂੰ ਉਹੀ ਜਾਣਕਾਰੀ ਚਾਹੀਦੀ ਹੈ।
• ਵਿਊਪੋਰਟ ਟੈਗ ਵਿੱਚ ਜ਼ੂਮ ਬੰਦ ਕਰਨਾ।
• ਫੋਨਾਂ 'ਤੇ ਡੈਸਕਟਾਪ-ਆਕਾਰ ਦੀਆਂ ਤਸਵੀਰਾਂ, ਜੋ ਲੋਡ ਸਮਾਂ ਅਤੇ ਡੇਟਾ ਖਰਚਦੀਆਂ ਹਨ।
• ਸਥਿਰ ਸਥਿਤੀ ਵਾਲੇ ਤੱਤਾਂ ਦਾ ਢੇਰ: ਇੱਕ ਚਿਪਕਿਆ ਹੈਡਰ, ਕੂਕੀ ਬੈਨਰ ਅਤੇ ਚੈਟ ਬੁਲਬੁਲਾ ਫੋਨ ਦੀ ਅੱਧੀ ਸਕ੍ਰੀਨ ਢਕ ਸਕਦੇ ਹਨ।
• ਪੌਪ-ਅੱਪ ਜੋ ਬੰਦ ਨਾ ਹੋ ਸਕਣ, ਛੋਟੀ ਸਕ੍ਰੀਨ 'ਤੇ, ਕਿਉਂਕਿ ਬੰਦ ਕਰਨ ਦਾ ਬਟਨ ਸਕ੍ਰੀਨ ਤੋਂ ਬਾਹਰ ਹੈ।

ਮੋਬਾਈਲ ਚੈੱਕਲਿਸਟ

• ਵਿਊਪੋਰਟ ਮੈਟਾ ਟੈਗ ਮੌਜੂਦ; ਜ਼ੂਮ ਬੰਦ ਨਹੀਂ
• ਕਿਸੇ ਵੀ ਪੇਜ 'ਤੇ 320 px 'ਤੇ ਪਾਸੇ ਵੱਲ ਸਕ੍ਰੌਲ ਨਹੀਂ
• ਬਾਡੀ ਟੈਕਸਟ ~16 px; ਇਨਪੁੱਟ ਜ਼ੂਮ ਨਹੀਂ ਕਰਵਾਉਂਦੇ
• ਟੈਪ ਟਾਰਗੇਟ ਆਰਾਮ ਨਾਲ ਵੱਡੇ ਅਤੇ ਵਿੱਥ ਵਾਲੇ
• ਮੀਨੂ ਫੋਨਾਂ 'ਤੇ ਅਤੇ ਕੀਬੋਰਡ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ
• ਟੇਬਲ ਫੋਨਾਂ 'ਤੇ ਪੜ੍ਹਨਯੋਗ (ਕਾਰਡ, ਘੱਟ ਕਾਲਮ ਜਾਂ ਸਕ੍ਰੌਲ ਕੰਟੇਨਰ)
• ਤਸਵੀਰਾਂ ਅਤੇ ਏਮਬੈੱਡ ਸਕੇਲ ਹੁੰਦੇ ਹਨ; ਸਹੀ ਆਕਾਰ ਦੀਆਂ ਫਾਈਲਾਂ ਦਿੱਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ
• ਫਾਰਮ ਸਹੀ ਇਨਪੁੱਟ ਕਿਸਮਾਂ ਵਰਤਦੇ ਹਨ; ਸਬਮਿਟ ਬਟਨ ਪਹੁੰਚਯੋਗ
• ਕੁਝ ਵੀ ਜ਼ਰੂਰੀ ਹੋਵਰ 'ਤੇ ਨਿਰਭਰ ਨਹੀਂ
• ਘੱਟੋ-ਘੱਟ ਇੱਕ ਅਸਲ ਫੋਨ 'ਤੇ ਟੈਸਟ ਕੀਤਾ

ਰਿਸਪੌਂਸਿਵ ਲੇਆਉਟ ਐਕਸੈਸਿਬਿਲਟੀ ਦਾ ਵੀ ਹਿੱਸਾ ਹੈ: WCAG ਮੰਗਦਾ ਹੈ ਕਿ ਸਮੱਗਰੀ 320 px ਚੌੜਾਈ ਅਤੇ 200% ਜ਼ੂਮ 'ਤੇ ਕੰਮ ਕਰੇ। ਜੇ ਤੁਸੀਂ ਇੱਕ ਐਪ ਬਣਾ ਰਹੇ ਹੋ ਜੋ ਲੋਕ ਰੋਜ਼ ਫੋਨਾਂ 'ਤੇ ਵਰਤਣਗੇ, ਤਾਂ ਮੋਬਾਈਲ-ਅਨੁਕੂਲ ਵੈੱਬ ਐਪ ਕਿਵੇਂ ਬਣਾਈਏ ਹੋਰ ਅੱਗੇ ਜਾਂਦਾ ਹੈ, ਇੰਸਟਾਲ ਹੋਣ ਯੋਗ PWA ਸਮੇਤ।

Mythex 'ਤੇ ਰਿਸਪੌਂਸਿਵ ਡਿਜ਼ਾਈਨ

Mythex ਰਿਸਪੌਂਸਿਵ ਵੈੱਬ ਐਪਾਂ ਬਣਾਉਂਦਾ ਹੈ, ਅਤੇ Pro 'ਤੇ ਉਨ੍ਹਾਂ ਨੂੰ Android ਅਤੇ iPhone ਐਪਾਂ ਵਜੋਂ ਵੀ ਲਪੇਟ ਸਕਦਾ ਹੈ। ਵਰਕਸਪੇਸ ਵਿੱਚ, Preview ਦੇ ਉੱਪਰ ਫੋਨ ਆਈਕਨ (Switch to Mobile) 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਤਾਂ ਜੋ ਆਪਣੀ ਐਪ ਫੋਨ-ਆਕਾਰ ਦੇ ਫਰੇਮ ਵਿੱਚ ਵੇਖੋ, ਅਤੇ ਫਰੇਮ ਦੀ ਕਿਨਾਰੀ ਖਿੱਚ ਕੇ ਹੋਰ ਚੌੜਾਈਆਂ ਅਜ਼ਮਾਓ (Preview and Code)। ਡੌਕਸ ਵਿੱਚ ਮੋਬਾਈਲ-ਰਿਸਪੌਂਸਿਵ ਪ੍ਰੋਂਪਟ ਵਿੱਚ ਛੋਟੀਆਂ ਸਕ੍ਰੀਨਾਂ ਦਾ ਲੇਆਉਟ ਠੀਕ ਕਰਨ ਲਈ ਇੱਕ ਛੋਟਾ ਸ਼ੁਰੂਆਤੀ ਪ੍ਰੋਂਪਟ ਹੈ। ਅਸਲ ਫੋਨ 'ਤੇ ਵੀ ਜਾਂਚੋ — ਪ੍ਰਕਾਸ਼ਿਤ URL ਖੋਲ੍ਹੋ, ਜਾਂ ਪ੍ਰੀਵਿਊ ਲਿੰਕ ਸਾਂਝਾ ਕਰਕੇ ਆਪਣੇ ਫੋਨ 'ਤੇ ਖੋਲ੍ਹੋ।

ਸਵਾਲ