મારા મિત્રએ તાજેતરમાં જ એક્સ થીમનો ઉપયોગ કરીને તેણે બનાવેલી વર્ડપ્રેસ સાઇટની મદદ માટે પૂછવા માટે મને સંપર્ક કર્યો. તેણે જોયું કે તેની વેબસાઇટ તેના આઇફોન પર યોગ્ય રીતે પ્રદર્શિત કરી રહી નથી ત્યારે તેના ગ્રાહકે તેને તે સવારે તેને બોલાવ્યો હતો. નિકે તેની જાતે તપાસ કરી, અને ખાતરી છે કે, તેણે બનાવેલી સુંદર પ્રતિભાવ ડિઝાઇન હવે કાર્ય કરી રહી નથી.
તેને તે હકીકત દ્વારા વધુ રહસ્યમય બન્યું હતું કે જ્યારે તેણે તેના બ્રાઉઝર વિંડોને તેના ડેસ્કટ .પ પર, સાઇટ પર કદ બદલી નાખ્યો હતી પ્રતિભાવ આપવા માટે, પરંતુ તેના આઇફોન પર, ફક્ત ડેસ્કટ .પ સંસ્કરણ પ્રદર્શિત થયું હતું. શા માટે એક સાઇટ હશે ડેસ્કટોપ કમ્પ્યુટર પર પ્રતિભાવ અને મોબાઇલ ઉપકરણ પર બિન-પ્રતિભાવ આપવા?
રિસ્પોન્સિવ ડિઝાઇન કેમ કામ કરતી નથી
HTML ફાઇલના હેડરમાંથી કોડની એક લાઇન ખૂટે છે ત્યારે રિસ્પોન્સિવ ડિઝાઇન કામ કરવાનું બંધ કરે છે. જો આ સિંગલ લાઇન કોડ ખૂટે છે, તો તમારું આઇફોન, એન્ડ્રોઇડ અને અન્ય મોબાઇલ ડિવાઇસ ધારે છે કે તમે જે વેબસાઇટ જોઈ રહ્યા છો તે એક પૂર્ણ-કદની ડેસ્કટ siteપ સાઇટ છે અને તેના કદને સમાયોજિત કરશે વ્યૂપોર્ટ આખી સ્ક્રીનને આવરી લેવા.
વ્યૂપોર્ટ અને વ્યૂપોર્ટ કદથી તમે શું માનો છો?
બધા ઉપકરણો પર, વ્યૂપોર્ટનું કદ એ વેબપૃષ્ઠના ક્ષેત્રના કદનો સંદર્ભ આપે છે જે હાલમાં વપરાશકર્તા માટે દૃશ્યમાન છે. કલ્પના કરો કે તમે 320 પિક્સેલ્સની પહોળાઈ સાથે આઇફોન 5 રાખ્યા છે. જ્યાં સુધી સ્પષ્ટ રીતે અન્યથા કહેવામાં ન આવે ત્યાં સુધી, આઇફોન્સ ધારે છે કે તમે મુલાકાત લેતા દરેક વેબસાઇટ 980px ની પહોળાઈવાળી ડેસ્કટ .પ સાઇટ છે.
હવે, તમારા કાલ્પનિક આઇફોન 5 નો ઉપયોગ કરીને,તમે ડેસ્કટ .પ માટે રચાયેલ વેબસાઇટની મુલાકાત લો છો જે 800 પીએક્સ પહોળી છે. તેમાં જવાબદાર લેઆઉટ નથી, તેથી તમારું આઇફોન પૂર્ણ-પહોળાઈનું ડેસ્કટ .પ સંસ્કરણ પ્રદર્શિત કરે છે.
મારું વોલ્યુમ બટન કામ કરતું નથી
પરંતુ આઇફોન 5 ફક્ત 320 પિક્સેલ્સ પહોળા છે. શું તે હંમેશાં વ્યૂપોર્ટનું કદ નથી?
ના તે નથી. વ્યૂપોર્ટ કદ સાથે, સ્કેલિંગ સામેલ થઈ શકે છે . વેબપેજના સંપૂર્ણ પહોળાઈવાળા સંસ્કરણને જોવા માટે આઇફોનને ઝૂમઆઉટ કરવું પડશે. યાદ રાખો કે વ્યૂપોર્ટ એ પૃષ્ઠના ક્ષેત્રનો સંદર્ભ આપે છે જે હાલમાં વપરાશકર્તા માટે દૃશ્યમાન છે. શું આઇફોન વપરાશકર્તા હાલમાં પૃષ્ઠનાં ફક્ત 320 પિક્સેલ્સ જોઈ રહ્યાં છે, અથવા તેઓ પૂર્ણ-પહોળાઈનું સંસ્કરણ જોઈ રહ્યાં છે?
તે સાચું છે: તેઓ તેમના ડિસ્પ્લે પર પૂર્ણ-પહોળાઈના વેબપેજને જોઈ રહ્યાં છે કારણ કે આઇફોન માની લે છે કે તે મૂળભૂત વર્તણૂક છે: તે ઝૂમ થઈ ગયું છે જેથી વપરાશકર્તા 980 પિક્સેલ્સની પહોળાઈ સુધી વેબપેજ જોઈ શકે. તેથી, આઇફોનનું વ્યૂપોર્ટ 980px છે.
જેમ તમે ઝૂમ ઇન અથવા આઉટ કરો છો, વ્યુપોર્ટ કદ બદલાશે. અમે તે પહેલાં કહ્યું હતું કે અમારી કાલ્પનિક વેબસાઇટની પહોળાઈ 800 પીએક્સ છે, તેથી જો તમે તમારા આઇફોનને ઝૂમ કરો છો, જેથી વેબસાઇટની ધાર તમારા આઇફોનનાં ડિસ્પ્લેની કિનારીઓને સ્પર્શ કરે, તો વ્યૂપોર્ટ 800 પીએક્સ હશે. આઇફોન કરી શકો છો ડેસ્કટ .પ સાઇટ પર 320px નું વ્યૂપોર્ટ રાખો, પરંતુ જો તે થાય, તો તમે ફક્ત તેનો એક નાનો ભાગ જોશો.
આઇફોન પર સંદેશની નકલ કેવી રીતે કરવી
મારી રિસ્પોન્સિવ વેબસાઇટ તૂટી ગઈ છે. હું તેને કેવી રીતે ઠીક કરી શકું?
જવાબ એ એચટીએમએલની એક જ લાઇન છે કે જ્યારે વેબપૃષ્ઠના હેડરમાં શામેલ કરવામાં આવે છે ત્યારે ઉપકરણને તેની પોતાની પહોળાઈ (આઇફોન 5 ના કિસ્સામાં 320 પીએક્સ) પર વ્યુપોર્ટ સેટ કરવા અને પૃષ્ઠને સ્કેલ (અથવા ઝૂમ) કરવા નહીં કહે છે.
આ મેટા ટેગથી સંબંધિત તમામ વિકલ્પોની વધુ તકનીકી ચર્ચા માટે, તપાસો tutsplus.com પર આ લેખ .
જ્યારે વર્ડપ્રેસ એક્સ થીમ રિસ્પોન્સિવ ન હોય ત્યારે તેને કેવી રીતે ઠીક કરવી
પહેલાંથી મારા મિત્ર પર પાછા ફરો: જ્યારે તેણે X થીમ અપડેટ કરી ત્યારે કોડની આ એક લાઇન અદૃશ્ય થઈ ગઈ. તમારું ઠીક કરતી વખતે, ધ્યાનમાં રાખો કે X થીમ ફક્ત એક હેડર ફાઇલનો ઉપયોગ કરતી નથી - તે દરેક સ્ટેક માટે વિવિધ હેડર ફાઇલોનો ઉપયોગ કરે છે, તેથી તમારે તમારું પોતાનું સંપાદન કરવું પડશે.
આઇફોન 30 પર બંધ થાય છે
નિક એક્સ થીમના ઇથોસ સ્ટેકનો ઉપયોગ કરે છે, તેથી તેણે x માં સ્થિત હેડર ફાઇલમાં મેં પહેલાં ઉલ્લેખિત કોડ લાઇન ઉમેરવી પડી. /frameworks/views/ethos/wp-header.php . જો તમે ભિન્ન સ્ટેકનો ઉપયોગ કરો છો, તો સાચી મથાળું ફાઈલ શોધવા માટે તમારા સ્ટેકનું નામ (પ્રામાણિકતા, નવીકરણ, વગેરે) ને બદલો. તે એક લાઇન શામેલ કરો, અને વોઇલા! તમે જવા માટે સારા છો.
તેથી આ મારી સીએસએસ મીડિયા પ્રશ્નોને સુધારે છે, પણ?
જ્યારે તમે તે લીટીને તમારી HTML ફાઇલના હેડરમાં દાખલ કરો છો, ત્યારે તમારી પ્રતિભાવ આપેલ @ મીડિયા ક્વેરીઝ અચાનક ફરીથી કામ કરવાનું શરૂ કરશે અને તમારી વેબસાઇટનું મોબાઇલ સંસ્કરણ ફરી જીવંત થશે. વાંચવા બદલ આભાર અને મને આશા છે કે તે મદદ કરે છે!
આગળ ચૂકવણી કરવાનું યાદ રાખો,
ડેવિડ પી.